无法理解 react.js 中的处理事件 [关闭]答案

【问题标题】：Unable to understand handling events in react.js [closed]无法理解 react.js 中的处理事件 [关闭]
【发布时间】：2017-12-26 06:18:32
【问题描述】：

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

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

【问题讨论】：

您在代码的哪一部分遇到问题，请具体说明

标签： javascript reactjs function events event-handling

【解决方案1】：

这是react方法对事件回调的绑定，所以我们可以在事件回调方法里面访问react组件类的this。在 react 中绑定你的方法有三种方式。

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

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。

【讨论】：

谢谢！我有最后一个疑问。我们什么时候真正使用'this'，为什么我们必须这样做？如果你能帮我举个例子，那就太好了！

【解决方案2】：

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

在上面的代码中，当用户点击按钮时，对应点击动作的事件（即 On Click 事件）会被触发，React 会用句法事件包装原生事件，调用相应的事件处理函数。在上面的代码中，该函数是 handleClick()。在该函数中，您可以执行与用户单击按钮操作相对应的逻辑。

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

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

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

【讨论】：