Estoy trabajando en aprender a reaccionar con un proyecto que ideé.
Tengo un componente principal que tiene una función handleClick:
handleEmail() { console.log('handle email triggered'); this.setState({ viewDisabled: 'hide', }) }
cuando lo activo desde dentro del mismo componente, como
<button onClick={this.handleEmail}>handle email</button>
registra "manejar correo electrónico activado" y establece correctamente el estado.
Tengo un componente hijo con un formulario:
<form onSubmit={this.handleSubmit}> <legend>Enter a valid email to start playing!</legend> <input type="email" value={this.state.value} onChange={this.handleChange} /> <input type="submit" value="Submit" onClick={this.props.handleEmail} /> </form>
llamado en el componente padre como:
<Email handleEmail={this.handleEmail} onChange={emailHandler} />
Cuando se hace clic en el botón Enviar, aparece y la consola registra "manejar el correo electrónico activado", pero falla con " No se pueden leer las propiedades de undefined (lectura, 'setState') " al intentar establecer el mismo estado que el clic nativo puede establecer Pensaría que estaba haciendo algo mal, pero sigue el mismo patrón que otro componente secundario que funciona con el mismo método y no puedo notar la diferencia. Cualquier idea de lo que esto significa sería útil. Supongo que tiene algo que ver con que el estado no se establezca correctamente en algún lugar del camino. Gracias por adelantado.
Este es un problema con this
enlace. Puede usar una función de flecha para evitarlo. Las funciones de flecha tienen enlace léxico de this
.
handleEmail = () => { console.log('handle email triggered'); this.setState({ viewDisabled: 'hide', }) }
O puede hacer this
enlace al handleEmail
dentro del constructor
del componente de clase como se muestra a continuación.
constructor(props) { super(props); this.handleEmail = this.handleEmail.bind(this); }