React Native + Redux Form: use el botón siguiente del teclado para ir al siguiente campo TextInput

Solución:

Esta solución pasa apoyos del Form componente a la RenderInput componente y devuelve una llamada de función.

Aquí está el código:

class RenderInput extends Component {
   const { input, refField, onEnter,
        meta: { touched, error, warning },
        input: { onChange } } = this.props
   render() {
      return (
         <TextInput
            ref = {refField}
            returnKeyType = {'next'}
            onChangeText={onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
            onSubmitEditing={onEnter}/>
      )
   }
}

class Form extends Component {
   render() {
      return (
         <Field
            name="field1"
            focus
            withRef
            ref={(componentRef) => this.field1 = componentRef}
            refField="field1"
            component={RenderInput}
            onEnter={() => { 
               this.field2.getRenderedComponent().refs.field2.focus()
            }}/>

         <Field
            name="field2"
            withRef
            ref={(componentRef) => this.field2 = componentRef}
            refField="field2"
            component={RenderInput}/>
      )
   }
} 

Entonces, ¿qué pasó aquí?

1. Asigno la referencia al alcance local con ref={(componentRef) => this.field1 = componentRef} como sugirió @Ksyqo. Gracias por la pista.

2. paso refField="field1" al RenderInput y asigne el valor a la propiedad ref de entrada ref = {refField}. Esto agregará el objeto de entrada a la propiedad refs.

3. Le asigné un onEnter función en el campo

4. Paso la función a los accesorios de RenderInput y la asigno al onSubmitEditing={onEnter} función. Ahora hemos unido las dos funciones. Eso significa que si onSubmitEditing se invoca el onEnter la función también se invoca

5. Finalmente, consulte el campo local field2, obtenga el Componente renderizado y use las referencias, que asignamos en el Input campo, para establecer el enfoque. this.field2.getRenderedComponent (). refs.field2.focus ()

No sé si esta es la solución más elegante pero funciona.

---

---

Utiliza Nuestro Buscador