反应JS |绑定事件处理程序

在ReactJS中，我们需要绑定事件，以便 this 关键字不会返回“未定义”。在本文中，我们将看到在ReactJS中绑定事件处理程序的不同方式。

首先，让我们创建一个新的类组件并将其命名为Binding.js。制作一个带有简单消息状态的简单类组件，并呈现一个简单的按钮，如下所示。不要忘记在App.js文件中导入这个组件。

绑定.js：

Javascript

import React, { Component } from 'react';
  
class EventBind extends Component {
    constructor(props) {
        super(props)
      
        this.state = {
            message: 'Welcome'
        }
    }
      
    render() {
        return (
            

                
{this.state.message}
                Click 
            
        )
    }
}
  
export default EventBind;

让我们编写一个事件，在单击按钮时将消息状态从“欢迎”更改为“告别” 。因此，让我们为按钮定义一个onClick 方法并编写一个事件处理程序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 (
            

                
{this.state.message}
                Click 
            
        )
    }
}
  
export default EventBind;

输出：现在如果我们运行应用程序并点击按钮，我们会得到一个错误。这是因为这返回一个“未定义” 。这就是为什么我们需要绑定我们的事件。

错误

• 在渲染方法中绑定事件处理程序：我们可以在渲染方法中使用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 (
            

                
{this.state.message}
                
                         Click 
            
        )
    }
}
  
export default EventBind;

• 使用箭头函数绑定事件处理程序：这与上面的方法几乎相同，但是，在这种方法中，我们隐式地绑定了事件处理程序。如果您想将参数传递给您的事件，这种方法是最好的。

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 (
            

                
{this.state.message}
                 this.clickHandler()}>
                  Click
                 
            
        )
    }
}
  
export default EventBind;

• 在构造函数中绑定事件处理程序：在这种方法中，我们将在构造函数中绑定事件处理程序。这也是ReactJS文档中提到的方法。这具有性能优势，因为与前两种方法相反，每次调用方法时事件都不会绑定。只需在此方法的构造函数中添加以下行，

Javascript

this.clickHandler = this.clickHandler.bind(this)

• 使用箭头函数作为类属性绑定事件处理程序：这可能是绑定事件并仍然轻松地将参数传递给事件处理程序的最佳方式。

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 (
            

                
{this.state.message}
                
                  Click
                 
            
        )
    }
}
  
export default EventBind;

输出：所有这些方法都为问题提供了相同的解决方案，您可以根据自己的要求使用其中任何一种。

单击按钮后的状态