Question

我正在练习过去两天的反应，当我开始“处理事件”部分时，我无法理解下面这段代码。有人可以帮我吗？

This is the image of the code that i am trying to understand

Answer 1

默认情况下，有一些HTML DOM events，对于这些事件，React中有一个Synthetic event来包装本机事件。请参阅官方文档以深入了解这两类事件。

在上面的代码中，用户单击按钮时，将触发与单击操作相对应的事件（即On Click事件），React将使用语法事件包装本机事件，调用相应的事件处理函数。在上面的代码中，该函数是 handleClick（）。在该函数中，您可以执行与按钮上的用户单击操作相对应的逻辑。

请注意，默认情况下，语法事件将作为第一个参数传递给 handleClick（）函数。因此，您可以按如下方式编写。

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

您可以使用很多supported events in React来捕获用户操作并相应地修改应用程序的行为。

Answer 2

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

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

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

使用箭头功能。简单但不推荐，因为它会为每次调用渲染函数绑定并初始化方法，这会降低性能。
```
<button onClick={(e) => this.handleClick(e)}/>
```

将箭头功能定义为类属性。

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

为了获得更好的性能，您可以使用1和3中的任何方法，但请尽量避免使用方法2.

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

2 个答案: