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

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!

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"
/>

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(); 
    }

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" />
...

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/

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 =)

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>
        )
    }
}

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 ()

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 )

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.

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

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>
        );
    }
});

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}
/>

<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();
}

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}/>
}

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;
                        }}/>

<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();
}

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} />
    )
  }
}

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

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>