React Native: Comment sélectionner le TextInput suivant après avoir appuyé sur le bouton clavier "suivant"?


201

J'ai défini deux champs TextInput comme suit:

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

Mais après avoir appuyé sur le bouton "Suivant" de mon clavier, mon application native ne réagit pas au deuxième champ TextInput. Comment puis-je y parvenir?

Merci!


La réponse de Mitch (actuellement la 3e en baisse) fonctionne pour moi sur la version 0.42.
lawrence

Pour les personnes sur React v16.8.0ou au-dessus, je recommanderais la réponse fournie par @Eli Johnson vers le bas. React a déconseillé de nombreuses utilisations des refsolutions ci-dessous.
thedeg123

Réponses:


331

Réglez la deuxième TextInputmise au point, lorsque le précédent de TextInputl » onSubmitEditingest déclenchée.

Essaye ça

  1. Ajout d'une référence au deuxième TextInput
    ref={(input) => { this.secondTextInput = input; }}

  2. Liez la fonction de focus au premier événement onSubmitEditing de TextInput .
    onSubmitEditing={() => { this.secondTextInput.focus(); }}

  3. N'oubliez pas de définir blurOnSubmit sur false pour éviter le scintillement du clavier.
    blurOnSubmit={false}

Une fois terminé, cela devrait ressembler à ceci.

<TextInput
    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>

53
Il onSubmitEditingconvient de mentionner que ce rappel est appelé après l' blurévénement. Ainsi, le clavier peut devenir fou s'il se concentre immédiatement sur l'élément suivant. Il peut donc être utile de définir blurOnSubmit={false}tous les éléments dans le formulaire, mais de laisser truele dernier élément, pour permettre au bouton Terminé de brouiller la dernière entrée.
e1dar

9
Cela ne fonctionne plus, depuis la version 0.36. Il n'y a pas de méthode "focus" sur le composant. Comment devons-nous procéder maintenant?
Mitch

4
@Mitch fonctionne bien sur 0.40.0. Il se peut que ce soit un bug dans la version que vous utilisiez.
vikki

3
En utilisant RN 0.49, l'ajout blurOnSubmit={false}pour empêcher le scintillement du clavier a provoqué l'arrêt de tout fonctionnement, quiconque sait ce qui se passe?
Nabil London

13
focusSi vous ne parvenez pas à faire fonctionner, assurez-vous de ne pas utiliser de wrapper pour le TextInputcomposant. Si vous avez un CustomTextInputcomposant say qui encapsule TextInput, vous devez implémenter des TextInputméthodes de flou et de focus pour ce composant afin qu'il fonctionne comme prévu.
Cihad Turhan

65

Vous pouvez le faire sans utiliser de références . Cette approche est préférée, car les références peuvent conduire à un code fragile . Les documents React conseillent de trouver d'autres solutions lorsque cela est possible:

Si vous n'avez pas programmé plusieurs applications avec React, votre première tendance sera généralement d'essayer d'utiliser des références pour "faire bouger les choses" dans votre application. Si tel est le cas, prenez un moment et réfléchissez de manière plus critique à l'endroit où l'État devrait appartenir à la hiérarchie des composants. Souvent, il devient clair que l'endroit approprié pour «posséder» cet état se situe à un niveau supérieur dans la hiérarchie. Placer l'état là-bas élimine souvent tout désir d'utiliser des références pour "faire bouger les choses" - à la place, le flux de données atteindra généralement votre objectif.

À la place, nous utiliserons une variable d'état pour focaliser le deuxième champ de saisie.

  1. Ajoutez une variable d'état que nous passerons comme accessoire à DescriptionInput:

    initialState() {
      return {
        focusDescriptionInput: false,
      };
    }
  2. Définissez une méthode de gestionnaire qui définira cette variable d'état sur true:

    handleTitleInputSubmit() {
      this.setState(focusDescriptionInput: true);
    }
  3. Après avoir soumis / appuyé sur Entrée / Suivant le TitleInput, nous appellerons handleTitleInputSubmit. Cela deviendra focusDescriptionInputvrai.

    <TextInput 
       style = {styles.titleInput}
       returnKeyType = {"next"}
       autoFocus = {true}
       placeholder = "Title" 
       onSubmitEditing={this.handleTitleInputSubmit}
    />
  4. DescriptionInputL' focushélice est définie sur notre focusDescriptionInputvariable d'état. Ainsi, lorsque des focusDescriptionInputmodifications (à l'étape 3), DescriptionInputseront rendues avec focus={true}.

    <TextInput
       style = {styles.descriptionInput}          
       multiline = {true}
       maxLength = {200}
       placeholder = "Description" 
       focus={this.state.focusDescriptionInput}
    />

C'est une bonne façon d'éviter d'utiliser des références, car les références peuvent conduire à un code plus fragile :)

EDIT: h / t à @LaneRettig pour avoir souligné que vous devrez encapsuler le React Native TextInput avec quelques accessoires et méthodes supplémentaires pour le faire répondre à focus:

    // Props:
    static propTypes = { 
        focus: PropTypes.bool,
    } 

    static defaultProps = { 
        focus: false,
    } 

    // Methods:
    focus() {
        this._component.focus(); 
    } 

    componentWillReceiveProps(nextProps) {
        const {focus} = nextProps; 

        focus && this.focus(); 
    }

2
@LaneRettig Vous avez tout à fait raison - merci de l'avoir signalé. Nous emballons RN TextInput avec quelques accessoires et méthodes supplémentaires - veuillez voir le bas de la réponse avec ces ajouts et faites-moi savoir si vous avez d'autres problèmes!
Stedman Blake

4
Cool. Vous devez le soumettre en tant que RP à RN. Je suis surpris que ce ne soit pas déjà pris en charge hors de la boîte.
Lane Rettig

8
que faire si vous cliquez sur suivant sur le clavier, puis cliquez directement sur la première entrée? le focus revient à la seconde, ce qui est une mauvaise expérience avec cette solution
Piotr

3
Je n'aime pas cette solution, en particulier parce qu'elle ne s'adapte pas bien aux formes même légèrement plus longues de 5-6 éléments, où vous auriez besoin d'un focus booléen dans chaque élément et les gérer tous en conséquence.
davidgoli

9
Fait intéressant, les documents indiquent également: "Il existe quelques bons cas d'utilisation pour les références: gérer la mise au point, la sélection de texte ou la lecture des médias ..." Dans ce cas, l'utilisation de références pour concentrer la saisie de texte serait une utilisation valide de l'outil .
Noah Allen

26

Depuis React Native 0.36, l'appel focus()(comme suggéré dans plusieurs autres réponses) sur un nœud de saisie de texte n'est plus pris en charge. À la place, vous pouvez utiliser le TextInputStatemodule de React Native. J'ai créé le module d'assistance suivant pour faciliter cela:

// TextInputManager
//
// Provides helper functions for managing the focus state of text
// inputs. This is a hack! You are supposed to be able to call
// "focus()" directly on TextInput nodes, but that doesn't seem
// to be working as of ReactNative 0.36
//
import { findNodeHandle } from 'react-native'
import TextInputState from 'react-native/lib/TextInputState'


export function focusTextInput(node) {
  try {
    TextInputState.focusTextInput(findNodeHandle(node))
  } catch(e) {
    console.log("Couldn't focus text input: ", e.message)
  }
}

Vous pouvez alors appeler la focusTextInputfonction sur n'importe quel "ref" de a TextInput. Par exemple:

...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...

1
Fonctionne très bien mais si quelqu'un utilise redux-form devrait faire quelque chose comme ça. <Field ... onSubmitEditing={() => focusTextInput(this._password)} />et ref devrait être comme ça<Field ... withRef refName={e => this._password = e}/>
tarkanlar

1
J'ai dû utiliser «onSubmitEditing» pour que cela fonctionne, mais une excellente solution néanmoins.
Adam Jakiela

3
Fonctionne très bien en 0,42.
lawrence

1
@tarkanlar pouvez-vous partager un extrait de code pour la solution? Je n'arrive pas à me concentrer lors de l'utilisation de Field redux-form, en utilisant uniquement les travaux TextInput, très bien
jasan

2
calling focus() on a text input node isn't supported any more=> revendication audacieuse, source? L'appel focus()fonctionne correctement avec v0.49.5 + TextInputStaten'est pas documenté pendant focus()et blur()est mentionné: facebook.github.io/react-native/releases/next/docs/…
tanguy_k

21

J'ai créé une petite bibliothèque qui fait cela, aucun changement de code nécessaire autre que le remplacement de votre vue d'habillage et l'importation de TextInput:

import { Form, TextInput } from 'react-native-autofocus'

export default () => (
  <Form>
    <TextInput placeholder="test" />
    <TextInput placeholder="test 2" />
  </Form>
)

https://github.com/zackify/react-native-autofocus

Expliqué en détail ici: https://zach.codes/autofocus-inputs-in-react-native/


Excellent modèle pour atteindre ce résultat. Devrait être la meilleure réponse du point de vue de la facilité d'utilisation. Il semble que je puisse facilement modifier mon FormInput personnalisé (extensions TextInput) pour continuer à travailler avec vos entrées de formulaire. Cela vous dérange si je l'inclus dans votre réponse si pour un autre exemple?
Jack Robson

Sûr! Je sais ... J'ai posté ceci sur l'autre post populaire à ce sujet mais j'ai eu des ennuis pour les doublons. J'essaye juste d'aider parce que je sais à quel point ce problème est ennuyeux !!
zackify

C'est très bien si vous avez un tas de TextInputs juste après l'autre mais si vous voulez ajouter un style entre eux, il tombe en panne. Merci pour la contribution cependant.
GenericJam

N'hésitez pas à ajuster le code. Je suis sûr que vous pourriez créer un moyen de sauter des éléments qui ne sont pas des entrées de texte. Ça ne devrait pas être trop difficile à faire.
zackify

1
Cela ne construit pas pour la production RN@0.47.2
Phil Andrews

18

Je pensais que je partagerais ma solution en utilisant un composant fonctionnel ... ' cela ' n'est pas nécessaire!

React 16.12.0 et React Native 0.61.5

Voici un exemple de mon composant:

import React, { useRef } from 'react'
...


const MyFormComponent = () => {

  const ref_input2 = useRef();
  const ref_input3 = useRef();

  return (
    <>
      <TextInput
        placeholder="Input1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => ref_input2.current.focus()}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => ref_input3.current.focus()}
        ref={ref_input2}
      />
      <TextInput
        placeholder="Input3"
        ref={ref_input3}
      />
    </>
  )
}

Je ne sais pas, j'espère que cela aide quelqu'un =)


1
Ca ne fonctionne pas. undefined n'est pas un objet évaluant _this2.ref_input2.current, s'il vous plaît aider
DEEP ADHIYA

Pouvez-vous fournir un exemple plus complet de votre code?
Eli Johnson

2
pourrait être préférable d'utiliser useRef dans le composant fonctionnel que createRef
hyuk lee

@hyuklee Vous avez en effet raison monsieur, j'ai mis à jour ... merci pour la tête! À votre santé!
Eli Johnson

Pour ceux qui aiment suivre les dernières mises à jour de React, voici LA RÉPONSE.
Yokhen

13

En utilisant react-native 0.45.1, j'ai également rencontré des problèmes en essayant de mettre l'accent sur un mot de passe TextInput après avoir appuyé sur la touche Entrée d'un nom d'utilisateur TextInput.

Après avoir essayé la plupart des solutions les mieux notées ici sur SO, j'ai trouvé une solution sur github qui répondait à mes besoins: https://github.com/shoutem/ui/issues/44#issuecomment-290724642

Résumer:

import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';

export default class TextInput extends Component {
    render() {
        const { props } = this;

        return (
            <RNTextInput
                {...props}
                ref={(input) => props.inputRef && props.inputRef(input)}
            />
        );
    }
}

Et puis je l'utilise comme ceci:

import React, {Component} from 'react';
import {
    View,
} from 'react-native';
import TextInput from "../../components/TextInput";

class Login extends Component {
    constructor(props) {
        super(props);
        this.passTextInput = null
    }

    render() {
        return (
            <View style={{flex:1}}>
                <TextInput
                    style={{flex:1}}
                    placeholder="Username"
                    onSubmitEditing={(event) => {
                        this.passTextInput.focus()
                    }}
                />

                <TextInput
                    style={{flex:1}}
                    placeholder="Password"
                    inputRef={(input) => {
                        this.passTextInput = input
                    }}
                />
            </View>
        )
    }
}

Vous me sauvez la vie
:)

1
Vous avez simplement renommé refpour inputRef... Vous pouvez déposer la totalité de votre composant personnalisé et votre deuxième bloc de code fonctionne en l' état aussi longtemps que vous revenir à l' utilisationref
Jason Tolliver

9

Pour moi sur RN 0.50.3 c'est possible de cette façon:

<TextInput 
  autoFocus={true} 
  onSubmitEditing={() => {this.PasswordInputRef._root.focus()}} 
/>

<TextInput ref={input => {this.PasswordInputRef = input}} />

Vous devez voir this.PasswordInputRef. _root .focus ()


1
Ceci est spécifique à la base native
Developia

8

Si vous utilisez tcomb-form-nativecomme moi, vous pouvez aussi le faire. Voici l'astuce: au lieu de définir les accessoires du TextInputdirectement, vous le faites via options. Vous pouvez vous référer aux champs du formulaire comme:

this.refs.form.getComponent('password').refs.input.focus()

Le produit final ressemble donc à ceci:

var t = require('tcomb-form-native');
var Form = t.form.Form;

var MyForm = t.struct({
  field1:     t.String,
  field2:     t.String,
});

var MyComponent = React.createClass({

  _getFormOptions () {
    return {
      fields: {
        field1: {
          returnKeyType: 'next',
          onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
        },
      },
    };
  },

  render () {

    var formOptions = this._getFormOptions();

    return (
      <View style={styles.container}>
        <Form ref="form" type={MyForm} options={formOptions}/>
      </View>
    );
  },
});

(Nous remercions Remcoanker d'avoir publié l'idée ici: https://github.com/gcanti/tcomb-form-native/issues/96 )


comment appeler la fonction onSubmitEditing? par exemple: je veux appeler la fonction login () lorsque l'utilisateur appuie sur la dernière touche de retour de textinput 'done'.
chetan

7

C'est ainsi que je l'ai réalisé. Et l'exemple ci-dessous a utilisé l'API React.createRef () introduite dans React 16.3.

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.secondTextInputRef = React.createRef();
  }

  render() {
    return(
        <View>
            <TextInput
                placeholder = "FirstTextInput"
                returnKeyType="next"
                onSubmitEditing={() => { this.secondTextInputRef.current.focus(); }}
            />
            <TextInput
                ref={this.secondTextInputRef}
                placeholder = "secondTextInput"
            />
        </View>
    );
  }
}

Je crois que ceci vous aidera.


quel est le but de .current?
Adam Katz

5

Mon scénario est <CustomBoladonesTextInput /> enveloppant un RN <TextInput /> .

J'ai résolu ce problème comme suit:

Ma forme ressemble à:

  <CustomBoladonesTextInput 
      onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
      returnKeyType="next"
      ... />

  <CustomBoladonesTextInput 
       ref={ref => this.customInput2 = ref}
       refInner="innerTextInput2"
       ... />

Sur la définition du composant CustomBoladonesTextInput, je passe le refField à l'accessoire de référence interne comme ceci:

   export default class CustomBoladonesTextInput extends React.Component {
      render() {        
         return (< TextInput ref={this.props.refInner} ... />);     
      } 
   }

Et le tour est joué. Tout revient à nouveau. J'espère que cela t'aides


4

Essayez cette solution sur les problèmes GitHub de React Native.

https://github.com/facebook/react-native/pull/2149#issuecomment-129262565

Vous devez utiliser l'accessoire ref pour le composant TextInput.
Ensuite, vous devez créer une fonction qui est appelée sur l'accessoire onSubmitEditing qui déplace le focus sur la deuxième référence TextInput.

var InputScreen = React.createClass({
    _focusNextField(nextField) {
        this.refs[nextField].focus()
    },

    render: function() {
        return (
            <View style={styles.container}>
                <TextInput
                    ref='1'
                    style={styles.input}
                    placeholder='Normal'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('2')}
                />
                <TextInput
                    ref='2'
                    style={styles.input}
                    keyboardType='email-address'
                    placeholder='Email Address'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('3')}
                />
                <TextInput
                    ref='3'
                    style={styles.input}
                    keyboardType='url'
                    placeholder='URL'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('4')}
                />
                <TextInput
                    ref='4'
                    style={styles.input}
                    keyboardType='numeric'
                    placeholder='Numeric'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('5')}
                />
                <TextInput
                    ref='5'
                    style={styles.input}
                    keyboardType='numbers-and-punctuation'
                    placeholder='Numbers & Punctuation'
                    returnKeyType='done'
                />
            </View>
        );
    }
});

Veuillez inclure les informations relatives du lien dans votre réponse.
Wes Foster

Gardez à l'esprit que les références de chaîne peuvent devenir obsolètes, de sorte que cette solution pourrait ne pas fonctionner à l'avenir: "... Bien que les références de chaîne ne soient pas obsolètes, elles sont considérées comme héritées et seront probablement obsolètes à un moment donné à l'avenir. Les références de rappel sont préféré." - facebook.github.io/react/docs/more-about-refs.html
yura

1
Cela ne fonctionne plus, depuis la version 0.36. Il n'y a pas de méthode "focus" sur le composant. Comment devons-nous procéder maintenant? Pouvez-vous mettre à jour la réponse?
Mitch

@Mitch ne sait pas si c'est de retour sur 0.39.2 mais cela fonctionne bien maintenant.
Eldelshell

4

Utilisation de références de rappel au lieu des références de chaîne héritées :

<TextInput
    style = {styles.titleInput}
    returnKeyType = {"next"}
    autoFocus = {true}
    placeholder = "Title"
    onSubmitEditing={() => {this.nextInput.focus()}}
/>
<TextInput
    style = {styles.descriptionInput}  
    multiline = {true}
    maxLength = {200}
    placeholder = "Description"
    ref={nextInput => this.nextInput = nextInput}
/>

1
Ne fonctionne pas car la méthode focus a été supprimée de TextInput.
Jacob Lauritzen

3
<TextInput 
    keyboardType="email-address"
    placeholder="Email"
    returnKeyType="next"
    ref="email"
    onSubmitEditing={() => this.focusTextInput(this.refs.password)}
    blurOnSubmit={false}
 />
<TextInput
    ref="password"
    placeholder="Password" 
    secureTextEntry={true} />

Et ajoutez la méthode onSubmitEditing={() => this.focusTextInput(this.refs.password)}comme ci-dessous:

private focusTextInput(node: any) {
    node.focus();
}

2

Pour que la solution acceptée fonctionne si vous vous trouvez TextInputdans un autre composant, vous devez «faire apparaître» la référence refdans le conteneur parent.

// MyComponent
render() {
    <View>
        <TextInput ref={(r) => this.props.onRef(r)} { ...this.props }/>
    </View>
}

// MyView
render() {
    <MyComponent onSubmitEditing={(evt) => this.myField2.focus()}/>
    <MyComponent onRef={(r) => this.myField2 = r}/>
}

1
Bonjour @Eldelshell, j'aimerais réaliser la même chose, mais je n'ai pas pu trier votre échantillon, cela vous dérangerait-il de nous donner un indice?
Seeliang

Je pense que cela devrait être la bonne réponse. Je suis ça et ça marche.
David Cheung

sont-ils tous les deux dans le même fichier?
MoralCode

2

dans votre composant:

constructor(props) {
        super(props);
        this.focusNextField = this
            .focusNextField
            .bind(this);
        // to store our input refs
        this.inputs = {};
    }
    focusNextField(id) {
        console.log("focus next input: " + id);
        this
            .inputs[id]
            ._root
            .focus();
    }

Remarque: j'ai utilisé ._rootcar il s'agit d'une référence à TextInput dans l'entrée NativeBase'Library '

et dans vos entrées de texte comme celle-ci

<TextInput
         onSubmitEditing={() => {
                          this.focusNextField('two');
                          }}
         returnKeyType="next"
         blurOnSubmit={false}/>


<TextInput      
         ref={input => {
              this.inputs['two'] = input;
                        }}/>

2
<TextInput placeholder="Nombre"
    ref="1"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.First_Name}
    onChangeText={First_Name => this.setState({ First_Name })}
    onSubmitEditing={() => this.focusNextField('2')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

<TextInput placeholder="Apellido"
    ref="2"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.Last_Name}
    onChangeText={Last_Name => this.setState({ Last_Name })}
    onSubmitEditing={() => this.focusNextField('3')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

et ajouter une méthode

focusNextField(nextField) {
    this.refs[nextField].focus();
}

Approche très soignée.
Siraj Alam

1
Ancienne réponse, mais quelqu'un sait-il s'il est possible d'accéder à toutes les références comme dans cette réponse dans un composant fonctionnel (sans état)?
Douglas Schmidt

1

Il existe un moyen de capturer des onglets dans un fichierTextInput . C'est hacky, mais mieux que rien .

Définissez un onChangeTextgestionnaire qui compare la nouvelle valeur d'entrée avec l'ancienne, en recherchant a \t. S'il en trouve un, avancez le champ comme indiqué par @boredgames

En supposant que la variable usernamecontient la valeur du nom d'utilisateur et setUsernameenvoie une action pour la modifier dans le magasin (état du composant, magasin redux, etc.), faites quelque chose comme ceci:

function tabGuard (newValue, oldValue, callback, nextCallback) {
  if (newValue.indexOf('\t') >= 0 && oldValue.indexOf('\t') === -1) {
    callback(oldValue)
    nextCallback()
  } else {
    callback(newValue)
  }
}

class LoginScene {
  focusNextField = (nextField) => {
    this.refs[nextField].focus()
  }

  focusOnPassword = () => {
    this.focusNextField('password')
  }

  handleUsernameChange = (newValue) => {
    const { username } = this.props            // or from wherever
    const { setUsername } = this.props.actions // or from wherever

    tabGuard(newValue, username, setUsername, this.focusOnPassword)
  }

  render () {
    const { username } = this.props

    return (
      <TextInput ref='username'
                 placeholder='Username'
                 autoCapitalize='none'
                 autoCorrect={false}
                 autoFocus
                 keyboardType='email-address'
                 onChangeText={handleUsernameChange}
                 blurOnSubmit={false}
                 onSubmitEditing={focusOnPassword}
                 value={username} />
    )
  }
}

Cela n'a pas fonctionné pour moi en utilisant un clavier physique. l'événement onChangeText ne se déclenche pas sur l'onglet.
Bufke

0

Voici une solution de réactif pour un composant d'entrée qui a une propriété: focus.

Le champ sera focalisé tant que cet accessoire est défini sur true et n'aura pas de focus tant que cela est faux.

Malheureusement, ce composant doit avoir un: ref défini, je n'ai pas pu trouver d'autre moyen d'appeler .focus () dessus. Je suis heureux des suggestions.

(defn focusable-input [init-attrs]
  (r/create-class
    {:display-name "focusable-input"
     :component-will-receive-props
       (fn [this new-argv]
         (let [ref-c (aget this "refs" (:ref init-attrs))
               focus (:focus (ru/extract-props new-argv))
               is-focused (.isFocused ref-c)]
           (if focus
             (when-not is-focused (.focus ref-c))
             (when is-focused (.blur ref-c)))))
     :reagent-render
       (fn [attrs]
         (let [init-focus (:focus init-attrs)
               auto-focus (or (:auto-focus attrs) init-focus)
               attrs (assoc attrs :auto-focus auto-focus)]
           [input attrs]))}))

https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5


@Bap - c'est Clojurescript. Le réactif est une liaison à React. Si vous êtes curieux, c'est un excellent match pour React si vous êtes à la recherche de mises à jour car les mises à jour avec état ne sont généralement possibles qu'avec des choses comme un appel explicite à swap!un atomtype. Selon les documents, ceci est utilisé pour la liaison à React: "Tout composant qui utilise un atome est automatiquement rendu de nouveau lorsque sa valeur change." reagent-project.github.io
Del

0

Si vous utilisez NativeBase comme composants d'interface utilisateur, vous pouvez utiliser cet exemple

<Item floatingLabel>
    <Label>Title</Label>
    <Input
        returnKeyType = {"next"}
        autoFocus = {true}
        onSubmitEditing={(event) => {
            this._inputDesc._root.focus(); 
        }} />
</Item>
<Item floatingLabel>
    <Label>Description</Label>
    <Input
        getRef={(c) => this._inputDesc = c}
        multiline={true} style={{height: 100}} />
        onSubmitEditing={(event) => { this._inputLink._root.focus(); }} />
</Item>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.