Question

我正在学习React，发现有两种不同的方法来定义组件类中的方法。

一种方法是将方法定义为类方法：

handleCategorySelected(category){
    this.setState({
        category
    })
};

，但首先需要将方法绑定到构造方法中的 this 。

constructor(props) {
    super(props);
    this.handleCategorySelected = this.handleCategorySelected.bind(this);
}

绑定后，我可以在JSX中使用它。

render() {
    return <Fragment>
        <Footer
            onSelect={this.handleCategorySelected}
        />
    </Fragment>
}

否则它将引发类型错误：

TypeError: Cannot read property 'setState' of undefined

第二种方法更简单

handleCategorySelected = (category) => {
    this.setState({
        category
    })
};

在定义之后，我可以在JSX中使用此方法，而无需在构造方法中绑定'this'。

两种方式之间有什么区别，为什么第一种方式在没有绑定“ this”的情况下引发错误，为什么另一种方式没有绑定？有什么不同？

Answer 1

方法1被称为public class fields syntax，使用它，我们不必担心this在运行时的含义，因为它是自动绑定的。例如：

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleCategorySelected.
  // Warning: this is *experimental* syntax.
  handleCategorySelected = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleCategorySelected}>
        Click me
      </button>
    );
  }
}

在方法2中，这只是类上的普通方法，当您使用ES6 class定义组件时，通用模式是事件处理程序的模式

但是，使用此方法时，必须注意JSX回调中this的含义。在JavaScript中，默认情况下，类方法不是bound。如果您忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时，this将未定义。

class LoggingButton extends React.Component {
  constructor(props) {
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.handleCategorySelected = this.handleCategorySelected.bind(this);
  }
  handleCategorySelected() {
    console.log('this is:', this);
  }

  render() {
    return <button onClick={this.handleCategorySelected}>Click me</button>;
  }
}

方法1和方法2之间的差异在于实际调用函数时函数内部this的含义。

参考：Handling Events

定义反应方法的两种方法有何不同？

1 个答案: