En ReactJS , necesitamos vincular eventos para que esta palabra clave no devuelva un » indefinido «. En este artículo, veremos las diferentes formas en que podemos vincular los controladores de eventos en ReactJS .
Primero, hagamos un nuevo componente de clase y asígnele el nombre Binding.js. Cree un componente de clase simple con un estado de mensaje simple y represente un botón simple como se muestra a continuación. No olvide importar este componente en el archivo App.js.
Encuadernación.js:
Javascript
import React, { Component } from 'react'; class EventBind extends Component { constructor(props) { super(props) this.state = { message: 'Welcome' } } render() { return ( <div> <h3>{this.state.message}</h3> <button>Click</button> </div> ) } } export default EventBind;
Escribamos un evento que cambie el estado del mensaje de ‘ Bienvenida ‘ a ‘Despedida ‘ cada vez que se haga clic en el botón. Así que definamos un método onClick para el botón y escribamos un controlador de eventos clickHandler() .
Javascript
import React, { Component } from 'react'; class EventBind extends Component { constructor(props) { super(props) this.state = { message: 'Welcome' } } clickHandler() { this.setState({ message:'Farewell' }) } render() { return ( <div> <h3>{this.state.message}</h3> <button onClick={this.clickHandler}>Click</button> </div> ) } } export default EventBind;
Salida: ahora, si ejecutamos la aplicación y hacemos clic en el botón, obtenemos un error. Esto se debe a que devuelve un «indefinido» . Es por eso que necesitamos vincular nuestros eventos.
- Vinculación del controlador de eventos en el método de procesamiento: podemos vincular el controlador cuando se llama en el método de procesamiento utilizando el método bind() .
Javascript
import React, { Component } from 'react'; class EventBind extends Component { constructor(props) { super(props) this.state = { message: 'Welcome' } } clickHandler() { this.setState({ message:'Farewell' }) } render() { return ( <div> <h3>{this.state.message}</h3> <button onClick={this.clickHandler.bind(this)}> Click</button> </div> ) } } export default EventBind;
- Vincular el controlador de eventos usando la función de flecha: este es prácticamente el mismo enfoque que el anterior, sin embargo, en este enfoque estamos vinculando el controlador de eventos implícitamente. Este enfoque es el mejor si desea pasar parámetros a su evento.
Javascript
import React, { Component } from 'react'; class EventBind extends Component { constructor(props) { super(props) this.state = { message: 'Welcome' } } clickHandler() { this.setState({ message:'Farewell' }) } render() { return ( <div> <h3>{this.state.message}</h3> <button onClick={() => this.clickHandler()}> Click </button> </div> ) } } export default EventBind;
- Vinculación del controlador de eventos en el constructor: en este enfoque, vamos a vincular el controlador de eventos dentro del constructor. Este es también el enfoque que se menciona en la documentación de ReactJS . Esto tiene beneficios de rendimiento ya que los eventos no se vinculan cada vez que se llama al método, a diferencia de los dos enfoques anteriores. Simplemente agregue la siguiente línea en el constructor para este enfoque,
Javascript
this.clickHandler = this.clickHandler.bind(this)
- Vincular el controlador de eventos usando la función de flecha como una propiedad de clase: esta es probablemente la mejor manera de vincular los eventos y aún así pasar fácilmente los parámetros a los controladores de eventos.
Javascript
import React, { Component } from 'react'; class EventBind extends Component { constructor(props) { super(props) this.state = { message: 'Welcome' } } clickHandler = () => { this.setState({ message:'Farewell' }) } render() { return ( <div> <h3>{this.state.message}</h3> <button onClick={this.clickHandler}> Click </button> </div> ) } } export default EventBind;
Salida: todos estos enfoques ofrecen la misma solución al problema, puede utilizar cualquiera de ellos según sus requisitos.
Publicación traducida automáticamente
Artículo escrito por rahulhegde97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA