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

Posted 2021-04-17

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

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

答案

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

1. 在构造函数中。绑定函数的最佳方法之一，因为构造函数将在整个反应组件生命周期中仅调用一次。 class Test { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick(e) { // Do whatever you want to here } }
2. 使用箭头功能。简单但不推荐，因为它会为每次调用render函数绑定并初始化方法，这会降低性能。 <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。

另一答案

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

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

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

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

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