Estaba leyendo la documentación y practicando algunas cosas en la documentación de React hasta que finalmente entré en la sección de manejo de eventos. pero no entiendo por qué cuando usamos el método en el componente de clase tenemos que vincular la función, ¿alguien puede explicarlo? por ejemplo :
class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } }El punto es mantener el valor correcto de this referencia. Mira este ejemplo:
class Example { private prop = 1; echoProp() { console.log(this?.prop); } } const example = new Example(); example.echoProp(); const echoPropRef = example.echoProp; echoPropRef(); En la consola verás 1 y luego undefined . Esto es porque:
Example:echoProp 's this referencia es una instancia de la clase Example , por lo que también se ve la propiedad prop .Example:echoProp a otra variable ( const echoPropRef = example.echoProp - no hay () ), entonces this referencia se cambia a undefined . la función bind "congela" this referencia, por lo que siempre será la misma; en su ejemplo, será una referencia a la clase Toggle .
El bind es necesario si usa código como
<button onClick={this.handleClick}>Cuando el botón activa handleClick , this valor dentro handleClick será el evento de clic (este es el comportamiento js para el detector de eventos), pero el evento de clic no tiene un método setState , que pertenece al componente en sí. Entonces, desea vincular el método al componente, de modo que this valor dentro handleClick sea el componente Toggle que tiene el método setState
this es un problema general en JS (no limitado a React).
Normalmente dentro de un método, this se refiere a la instancia del objeto actual.
Dentro de un detector de eventos (incluso si es un método), this se refiere al objetivo del evento.
El this en this.setState debe hacer referencia a la instancia del Componente.
Entonces, para cambiar el valor de this , el enlace se realiza en el constructor.
Otra solución sería
onClick={(evt)=>{handleClick(evt)}} En este caso, handleClick deja de ser un detector de eventos y el detector de eventos real sería la función anónima dentro de onClick .
La alternativa más simple es:
handleClick=(evt)=>{ this.setState(...) } Las funciones de flecha no tienen su propio this y, por lo tanto, adquieren la instancia del objeto (componente) actual como this .