Javascript React：ES8中的事件处理

我试图在ES8标准中使用最接近的事件处理方式。在React中，以下方面的区别是什么：

  handleButtonPressSearch(inputValue) {
    this.setState({
      showAll: true
    });
  }

对

  handleButtonPressSearch = (inputValue) => {
    this.setState({
      showAll: true
    });
  }

哪种方式更可取

两者的区别是什么

您的第一个示例是一个方法。调用方法时，

这取决于调用方法的方式（与使用
函数
关键字的传统函数一样）。因此，如果将对该方法的引用作为回调传递给其他代码（例如，事件处理程序），则需要确保
this
设置为组件实例，而不是其他对象

通常在使用方法时，在构造函数中将它们绑定到实例：

this.handleButtonPressSearch = this.handleButtonPressSearch.bind(this);

第二个示例使用语法和箭头函数。箭头函数不在乎你用什么来调用它，它们忽略它；相反，它们使用的是创建它们的上下文中的
this
。对于类字段，这是实例。因此，您不需要
bind
调用<代码>该函数中的此

将始终引用您的组件实例

请注意，类字段语法仍然不是标准的JavaScript，但仍处于第3阶段，大多数React项目都设置为允许您通过Transfilation使用类字段

哪种方式更可取

---

两者都不是首选，这是风格的问题。两者都可以访问实例，并且都可以在必要时使用

super

（尽管在React中，通常不鼓励继承）。

第一种方法仅在“类”语法中有效。第二个是箭头函数。两者都不应被优先考虑，因为它们是不同的