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:

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.

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

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.

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

Publicación traducida automáticamente

Artículo escrito por rahulhegde97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *