Estoy escribiendo una aplicación de reacción y, por alguna razón, no puedo entender este problema. A continuación se muestra un fragmento, lo único que debería ser necesario:
onFirstNameChange(event: any){ console.log(event.target.value) // this.setState({ // firstname: event.target.value // }) }El código comentado no se ejecutará, dice que no puede leer las propiedades de undefined. Sin embargo, cuando registro el valor de los eventos, lo hace perfectamente. ¿Alguna idea de por qué esto esta pasando? Es un evento onchange. También está profundamente anidado, sin embargo, el valor lo recupera.
Reaccione los componentes escritos en una clase ES6, no this enlace automáticamente a los métodos del componente. Hay 2 soluciones principalmente. Puede usar elegir:
this en el constructor constructor(props) { super(props); // rest of code // this.state = { firstname: '', }; // rest of code // this.onFirstNameChange = this.onFirstNameChange.bind(this); } onFirstNameChange = (event: any) => { console.log(event.target.value); this.setState({ firstname: event.target.value }); }Como dijo Brian, también creo que el error que dice que no puede leer la propiedad de indefinido, probablemente dice que no puede leer la propiedad setState de indefinido, porque "esto" no está definido.
Lo más probable es que esto se deba al proporcionar el controlador onFirstNameChange sin aprovechar una función de cierre, vinculación o flecha para vincular el valor de this al valor "this" que espera.
Supongo que su código que aprovecha el controlador de cambio se parece a lo siguiente:
<input type="text" value={this.state.value} onChange={this.onFirstNameChange} />Puede consultar la página "Manejo de eventos" (enlace aquí ) de la documentación de React, encontrará lo siguiente a mitad del artículo:
Debe tener cuidado con el significado de esto en las devoluciones de llamada JSX. En JavaScript, los métodos de clase no están vinculados de forma predeterminada. Si olvida vincular this.handleClick y pasarlo a onClick, no estará definido cuando se llame a la función.
Este no es un comportamiento específico de React; es una parte de cómo funcionan las funciones en JavaScript. Por lo general, si hace referencia a un método sin () después, como onClick={this.handleClick}, debe vincular ese método.
Si llamar a bind te molesta, hay dos formas de evitarlo. Si usa la sintaxis experimental de campos de clase pública, puede usar campos de clase para vincular correctamente las devoluciones de llamada.
SOLUCIONES: he incluido ejemplos de las 3 posibles soluciones a continuación para vincular el valor de esto, según su preferencia:
Opción 1: suponiendo que se trata de un componente basado en clases, que estoy basado en la sintaxis que se muestra, puede vincular el método en el constructor:
constructor(props) { super(props); this.onFirstNameChange.bind(this); }Opción 2: actualice la definición del método a la sintaxis de los campos de clase pública con una función de flecha para vincular "esto": (Ver aquí )
onFirstNameChange = (event: any) => { console.log(event.target.value) this.setState({ firstname: event.target.value }) };Opción 3: actualice la devolución de llamada onChange con la función de flecha anónima para vincular este valor:
<input type="text" value={this.state.value} onChange={() => this.onFirstNameChange} />Nota sobre la opción 3 de React Docs:
El problema con esta sintaxis es que se crea una devolución de llamada diferente cada vez que se procesa LoggingButton. En la mayoría de los casos, esto está bien. Sin embargo, si esta devolución de llamada se pasa como apoyo a los componentes inferiores, esos componentes podrían volver a renderizarse más. Por lo general, recomendamos enlazar en el constructor o usar la sintaxis de los campos de clase para evitar este tipo de problemas de rendimiento.