Estoy trabajando en el proyecto react native, creé formularios con componentes react native. Usé TextInput para editar un valor de estado como este:

<TextInput
    shake
    keyboardAppearance='light'
    autoFocus={false}
    autoCapitalize='none'
    autoCorrect={false}
    keyboardType='default'
    returnKeyType='next'
    value={this.state.sector}
    onChangeText={sector => this.setState({ sector })}
/>

Con console.log, el valor del sector obtengo correctamente el valor actual después del cambio de entrada, pero he visto algunos ejemplos con una referencia como esta:

<TextInput
    shake
    keyboardAppearance='light'
    autoFocus={false}
    autoCapitalize='none'
    autoCorrect={false}
    keyboardType='default'
    returnKeyType='next'
    value={this.state.sector}
    ref={input => (this.sectorInput = input)}
    onChangeText={sector => this.setState({ sector })}
/>

No entiendo esta operación:

ref={input => (this.sectorInput = input)}

¿Alguien puede explicar cuál es la referencia y por qué la usamos con una entrada y cuándo debería usar una referencia?

0
Khaled Boussoffara 14 oct. 2019 a las 16:23

1 respuesta

La mejor respuesta

Si desea acceder a los métodos de TextInput, debe crear una referencia de ese componente, luego, usando la referencia, puede usar su método.

Por ejemplo, tiene un formulario en su aplicación y desea que cuando el usuario complete el primer campo y luego desee establecer el enfoque en el siguiente campo, puede hacer lo siguiente:

<TextInput
    shake
    keyboardAppearance='light'
    autoFocus={false}
    autoCapitalize='none'
    autoCorrect={false}
    keyboardType='default'
    returnKeyType='next'
    value={this.state.sector}
    ref={input => { this.sectorInput = input}}
    onSubmitEditing={() => {
        this.nextField.focus();
    }}
    onChangeText={sector => this.setState({ sector })}
/>

<TextInput
    shake
    keyboardAppearance='light'
    autoFocus={false}
    autoCapitalize='none'
    autoCorrect={false}
    keyboardType='default'
    returnKeyType='next'
    value={this.state.sector}
    ref={input => { this.nextField = input}}
    onSubmitEditing={() => {
        this.handleSubmit();
    }}
    onChangeText={nextField => this.setState({ nextField })}
/>

Ahora, cuando el usuario llene el campo sector, si presiona Siguiente, entonces nextField se enfocará automáticamente.

2
Kishan Bharda 14 oct. 2019 a las 14:07