reactjs - this.handleChange = this.handleChange.bind(this);

Question

这个问题在这里已经有了答案:





Why is JavaScript bind() necessary?

(4 个回答)


3年前关闭。




我不明白我为什么需要

this.handleChange = this.handleChange.bind(this);

使我的程序工作:

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = { foo: 1 }
    }

    render() {
        return (
                <div>
                <input onChange={this.handleChange} value="xxx" />
                <span>yes {this.state.foo}</span>

                </div>



        );
    }

    handleChange(e) {
        console.log("called 1");
        this.setState({foo: this.state.foo+1});
    }

}


ReactDOM.render(<Foo />, document.getElementById("name1") )

换句话说，什么

this.handleChange = this.handleChange.bind(this);

通俗地说

Answer 1

在 JavaScript 中，默认情况下不绑定(bind)类方法。如果您忘记绑定(bind) this.handleClick 并将其传递给 onClick，则在实际调用该函数时 this 将是未定义的。

这不是 React 特有的行为；它是 JavaScript 中函数工作方式的一部分。一般如果引用后面不带()的方法，比如onClick={this.handleClick} ，你应该绑定(bind)那个方法。

如果调用 bind 惹恼了你，有两种方法可以解决这个问题。您可以在回调中使用实验性的公共(public)类字段语法或箭头函数:

箭头函数示例:

    class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}