A veces estoy realmente confundido cuando necesito agregar .bind(this) al método (ES5) o usar la función de flecha (ES6), por ejemplo
handleSubmit(e) { console.log(this) } handleChange(e) { console.log(this) } render() { return ( <div className="col-sm-4"> <form onChange={e => this.handleChange(e)} onSubmit={e => this.handleSubmit(e)}> <input type="text" name="user" placeholder="user"/> <input type="text" name="comment" placeholder="comments"/> <input type="submit" hidden/> </form> </div> ) } Entonces, si quiero acceder a this dentro handleChange y handleSubmit , entonces tengo que usar la función de flecha de onChange y onSubmit , de lo contrario, onChange y onSubmit se pueden cambiar como:
<form onChange={this.handleChange} onSubmit={this.handleSubmit}>¿Tengo razón? Gracias
Sí, necesita .bind cada vez que pase su función personalizada a un controlador de eventos como onChange o onSubmit .
Esto se debe a las diferencias de this contexto en React.createClass() frente a las extensiones de React.Component.
El uso de React.createClass() vinculará automáticamente este contexto (valores) correctamente, pero ese no es el caso cuando se usan clases ES6. Al hacerlo de la manera ES6 (al extender React.Component), este contexto es null de forma predeterminada. Las propiedades de la clase no se vinculan automáticamente a la instancia de la clase React (componente).
Por cierto, .bind no es la única opción disponible. Vea mi respuesta aquí para obtener un resumen de todos los enfoques que conozco.
PD: esto no es algo específico de Redux, en realidad, no tiene nada que ver con cómo funciona Redux. Ese es un comportamiento puro relacionado con ReactJS.
Sí, tiene razón, por supuesto si quiere decir que this es el contexto de su clase. En mi opinión, usar .bind en estos casos es más claro, pero no sé si eso es más eficiente.
En su ejemplo, puede usar las funciones de flecha y hacer el formulario como lo indicó.
La otra opción es tener un constructor en el que enlazar.
constructor() { super(); this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } entonces su formulario sería <form onChange={this.handleChange} onSubmit={this.handleSubmit}>