#React 如何在JSX回调中绑定方法或事件处理程序？

有3种可能的方法可以实现此目的：

在构造函数中进行绑定：在JavaScript类中，默认情况下未绑定方法。同样的事情也适用于定义为类方法的React事件处理程序。通常我们将它们绑定在构造函数中。

class Component extends React.Componenet {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // ...
  }
}

公共类字段语法：如果您不喜欢使用绑定方法，则可以使用公共类字段语法正确地绑定回调。

handleClick = () => { console.log('this is:', this) }

{'Click me'} 回调函数中的箭头函数：您可以直接在回调函数中使用箭头函数。

<button ```js
onClick={(event) => this.handleClick(event)}>
  {'Click me'}

注意：如果将回调作为prop传递给子组件，则这些组件可能会进行额外的重新渲染。在这种情况下，最好是去.bind()或公共类字段语法的方法考虑性能。