无法理解React.js中的处理事件

Question

我从过去两天开始练习反应，当我开始'处理事件'部分时，我无法理解以下代码。有人可以帮助我吗？

这是我要理解的代码的图像

Answer 1

这是React方法与事件回调的绑定，因此我们可以访问事件回调方法中的React组件类的this。有三种方法可以在React中绑定您的方法。

1. 在构造函数中。绑定您功能的最佳方法之一，因为在整个React组件生命周期中，构造函数只能被调用一次。

   class Test {
    constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e) {
     // Do whatever you want to here
    }
   }
   

2. 使用箭头功能。简单但不推荐，因为它将绑定并初始化渲染功能的每个方法，这将降低性能。

   <button onClick={(e) => this.handleClick(e)}/>
   

3. 将箭头函数定义为类属性。

   class Test {
    handleClick = (e) => {
     // Do whatever you want to here
    }
    render() {
     return(
      ...
      <button onClick={this.handleClick}/>
     )
    }
   }
   

   为了更好地性能，您可以使用1和3中的任何方法，但尝试避免方法2。

Answer 2

默认情况下有许多HTML DOM事件，对于这些事件，React中有一个合成事件，可以包装本机事件。请参阅官方文档以深入了解这两种事件。

在上面的代码中，当用户单击按钮上的单击时，将触发与单击操作相对应的事件（即，在单击事件上）将被触发，而react将用语法事件和调用各自的事件处理程序功能。在上面的代码中，该函数为 handleclick（）。在该功能中，您可以执行与用户单击按钮上的操作对应的逻辑。

请注意，默认情况下，句法事件将作为第一个参数传递给 handleclick（）函数。因此，您可以按照下面的方式写入它。

handleClick(event) {
    console.log(event)
    // your logic
}

React中有很多支持的事件，您可以使用它们来捕获用户操作并相应地修改应用程序的行为。