0
236
VisualizaçõesObtenga valor de InputText usando React.createRef()
En lugar de volver a representar todo el árbol de componentes cada vez que se cambia "<estilo de texto de entrada{...}>", estoy tratando de usar referencias en mi componente de clase. (Estoy usando React Native con el flujo de trabajo administrado por Expo).
Usando refs, el texto escrito aparece como debería en el campo InputText. Pero, cuando se presiona un botón, el valor del texto escrito (valor de InputText) debe registrarse en la consola, sin embargo, no es así.
export class Feed extends Component { constructor(props){ super(props); this.state = { //some state variables } this.myTextFromInput = React.createRef() }Empecé creando la referencia myTextFromInput (arriba).
<TextInput style={{height:100}} ref={this.alias} placeholder="Input Text Here" />Luego usé la referencia myTextFromInput en el componente InputText. Y por último, ¡el botón!
<Button onPress={()=>console.log(this.myTextFromInput.current.value)}>Press me!</Button> Esto me da undefined . También probé this.myTextFromInput.value y un método .getText() que está desactualizado.
¿Cómo puedo obtener el texto introducido?
ACTUALIZACIÓN: registro de terminal undefined . ¿¡Pero la merienda funciona bien!?
1 Respostas
Responde à pergunta0
No está pasando la referencia correcta a TextInput , debería ser this.myTextFromInput no this.alias , eche un vistazo:
export class Feed extends Component { constructor(props){ super(props); this.state = { //some state variables } this.myTextFromInput = React.createRef() // bind the method to the component instance this.logInputText = this.logInputText.bind(this) } logInputText() { console.log(this.myTextFromInput.current.value) } render() { return ( <View> <TextInput style={{height:100}} // pass the correct reference here ref={this.myTextFromInput} placeholder="Input Text Here" /> <Button onPress={this.logInputText}> Press me! </Button> </View> ) } }Además, no olvide que si usa un método en lugar de una función de flecha, debe vincularlo a la instancia de la clase, como hice yo. Vea esta pregunta y este ejemplo de los documentos de reacción.
Actualización: React.ref en Android e iOS no parece funcionar de la misma manera que funciona en la web, no puede obtener el valor de la entrada porque el componente no proporciona esta propiedad, haciendo un console.log(this.myTextFromInput.current) puede ver todas las propiedades disponibles. Una solución a esta pregunta es usar TextInput del paquete react-native-paper , ya que proporciona el valor de entrada de la referencia, o puede usar el enfoque de estado común para almacenar el valor de entrada, así:
export class Feed extends Component { constructor(props){ super(props); this.state = { myTextFromInput: "" } // bind the method to the component instance this.logInputText = this.logInputText.bind(this) } logInputText() { console.log(this.state.myTextFromInput) } render() { return ( <View> <TextInput style={{height:100}} // you don't need to use ref placeholder="Input Text Here" onChangeText={(text) => this.setState({myTextFromInput: text})} /> <Button onPress={this.logInputText}> Press me! </Button> </View> ) } }