Reagisci nativo: come selezionare il successivo TextInput dopo aver premuto il pulsante "successivo" della tastiera?

Ho definito due campi TextInput come segue:

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

Ma dopo aver premuto il pulsante "Avanti" sulla mia tastiera, la mia app Reazione-nativa non passa al secondo campo TextInput. Come posso raggiungerlo?

Grazie!

Impostare la seconda TextInputmessa a fuoco, quando il precedente TextInput's onSubmitEditingviene attivato.

Prova questo

1. Aggiunta di un riferimento al secondo TextInput
   ref={(input) => { this.secondTextInput = input; }}

2. Associa la funzione focus al primo evento onSubmitEditing di TextInput .
   onSubmitEditing={() => { this.secondTextInput.focus(); }}

3. Ricorda di impostare blurOnSubmit su false per evitare lo sfarfallio della tastiera.
   blurOnSubmit={false}

Al termine, dovrebbe apparire così.

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

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

Puoi farlo senza usare refs . Questo approccio è preferito, poiché i ref possono portare a codici fragili . I documenti di React consigliano di trovare altre soluzioni ove possibile:

Se non hai programmato diverse app con React, la tua prima inclinazione sarà in genere quella di provare a utilizzare refs per "far accadere le cose" nella tua app. In questo caso, prenditi un momento e pensa in modo più critico a dove lo stato dovrebbe essere posseduto nella gerarchia dei componenti. Spesso, diventa chiaro che il posto giusto per "possedere" quello stato è ad un livello superiore nella gerarchia. Posizionare lo stato lì spesso elimina qualsiasi desiderio di usare i ref per "far accadere le cose" - invece, il flusso di dati di solito raggiungerà il tuo obiettivo.

Invece, useremo una variabile di stato per focalizzare il secondo campo di input.

1. Aggiungi una variabile di stato che passeremo come prop a DescriptionInput:

   initialState() {
     return {
       focusDescriptionInput: false,
     };
   }
   

2. Definire un metodo del gestore che imposterà questa variabile di stato su true:

   handleTitleInputSubmit() {
     this.setState(focusDescriptionInput: true);
   }
   

3. Quando invii / premi invio / successivo sul TitleInput, chiameremo handleTitleInputSubmit. Questo sarà impostato focusDescriptionInputsu vero.

   <TextInput 
      style = {styles.titleInput}
      returnKeyType = {"next"}
      autoFocus = {true}
      placeholder = "Title" 
      onSubmitEditing={this.handleTitleInputSubmit}
   />
   

4. DescriptionInputIl focusprop è impostato sulla nostra focusDescriptionInputvariabile di stato. Quindi, quando le focusDescriptionInputmodifiche (nel passaggio 3), DescriptionInputverranno renderizzate nuovamente con focus={true}.

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

Questo è un bel modo per evitare di usare refs, dato che refs può portare a un codice più fragile :)

EDIT: h / t a @LaneRettig per aver sottolineato che dovrai avvolgere React Native TextInput con alcuni oggetti di scena e metodi aggiunti per farlo rispondere a focus:

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

    static defaultProps = { 
        focus: false,
    } 

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

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

        focus && this.focus(); 
    }

A partire da React Native 0.36, la chiamata focus()(come suggerito in molte altre risposte) su un nodo di input di testo non è più supportata. Invece, puoi usare il TextInputStatemodulo da React Native. Ho creato il seguente modulo di supporto per facilitare questo:

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

È quindi possibile chiamare la focusTextInputfunzione su qualsiasi "ref" di a TextInput. Per esempio:

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

Ho creato una piccola libreria che esegue questa operazione, non è necessaria alcuna modifica del codice oltre a sostituire la visualizzazione a capo e l'importazione di 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

Spiegato in dettaglio qui: https://zach.codes/autofocus-inputs-in-react-native/

Ho pensato di condividere la mia soluzione usando un componente di funzione ... ' questo ' non è necessario!

Reagire 16.12.0 e Reagire nativo 0.61.5

Ecco un esempio del mio componente:

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

Non so, spero che questo aiuti qualcuno =)

Usando reattivo 0.45.1 nativo ho anche riscontrato problemi nel tentativo di mettere a fuoco una password TextInput dopo aver premuto il tasto Invio su un nome utente TextInput.

Dopo aver provato la maggior parte delle soluzioni più votate qui su SO, ho trovato una soluzione su github che soddisfaceva le mie esigenze: https://github.com/shoutem/ui/issues/44#issuecomment-290724642

Riassumendo:

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

E poi lo uso così:

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

Per me su RN 0.50.3 è possibile in questo modo:

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

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

Devi vedere this.PasswordInputRef. _root .focus ()

Se ti capita di usare tcomb-form-nativecome sono, puoi farlo anche tu. Ecco il trucco: invece di impostare gli oggetti di scena TextInputdirettamente, lo fai tramite options. È possibile fare riferimento ai campi del modulo come:

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

Quindi il prodotto finale è simile al seguente:

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

(Ringraziamo il remcoanker per aver pubblicato l'idea qui: https://github.com/gcanti/tcomb-form-native/issues/96 )

Questo è il modo in cui l'ho raggiunto. E l'esempio seguente ha utilizzato l'API React.createRef () introdotta in 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>
    );
  }
}

Penso che questo ti aiuterà.

Il mio scenario è <CustomBoladonesTextInput /> che avvolge un RN <TextInput /> .

Ho risolto questo problema come segue:

La mia forma è simile a:

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

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

Sulla definizione del componente CustomBoladonesTextInput, passo refField al puntello di riferimento interno in questo modo:

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

E voilà. Tutto torna indietro funziona di nuovo. Spero che questo ti aiuti

Prova questa soluzione sui problemi GitHub di React Native.

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

È necessario utilizzare il puntello di riferimento per il componente TextInput.
Quindi è necessario creare una funzione che viene chiamata sul puntello di OnSubmitEditing che sposta lo stato attivo sul secondo riferimento 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>
        );
    }
});

Utilizzo dei riferimenti callback invece dei riferimenti stringa legacy :

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

E aggiungi il metodo per onSubmitEditing={() => this.focusTextInput(this.refs.password)}come di seguito:

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

Affinché la soluzione accettata funzioni se ci si TextInputtrova all'interno di un altro componente, è necessario "inserire" il riferimento refnel contenitore padre.

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

nel tuo componente:

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

Nota: l'ho usato ._rootperché è un riferimento a TextInput nell'input 'Library' di NativeBase

e nei tuoi input di testo in questo modo

<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%', }} />

e aggiungi metodo

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

C'è un modo per catturare le schede in a TextInput. È confuso, ma meglio di niente .

Definire un onChangeTextgestore che confronta il nuovo valore di input con il vecchio, verificando la presenza di a \t. Se ne viene trovato uno, avanzare nel campo come mostrato da @boredgames

Supponendo che la variabile usernamecontenga il valore per il nome utente e setUsernameinvii un'azione per cambiarla nel negozio (stato del componente, negozio redux, ecc.), Fare qualcosa del genere:

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

Qui una soluzione di reagente per un componente di input che ha una proprietà: focus.

Il campo sarà focalizzato fintanto che questo prop sarà impostato su true e non avrà focus fino a quando questo sarà falso.

Sfortunatamente questo componente deve avere un: ref definito, non sono riuscito a trovare un altro modo per chiamare .focus () su di esso. Sono contento dei suggerimenti.

(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

Se si utilizza NativeBase come componenti dell'interfaccia utente, è possibile utilizzare questo esempio

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