ReactJS | Controladores de eventos vinculantes

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:

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() .

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.

Error

• 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() . 

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.

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,

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.

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.

Estado después de hacer clic en el botón