Reactjs this.handleChange=this.handleChange.bind（this）；

我不明白为什么我需要

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") )

---

在JavaScript中，类方法默认不受约束。如果忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时，该函数将未定义

这不是特定的行为；它是JavaScript中函数工作方式的一部分。通常，如果引用的方法后面不带（），例如

onClick={this.handleClick}

，则应该绑定该方法

如果打电话给bind会让你烦恼，有两种方法可以解决这个问题。您可以在回调中使用实验性公共类字段语法或箭头函数：

箭头函数示例：

    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>
    );
  }
}

class LoggingButton扩展了React.Component{
handleClick（）{
log（'这是：'，这是）；
}
render（）{
//此语法确保“This”绑定在handleClick中
返回(
这个.handleClick（e）}>
点击我
);
}
}

我不熟悉react，但如果您在angularJs中执行类似操作，则意味着您正在将此对象的范围绑定到方法。这意味着您正在将当前对象的范围绑定到方法。使用此方法有一个缺点。因为您将在渲染执行时更改onClick函数处理程序，从而在每次渲染时更改虚拟dom，最终更改实际dom。解决方案是将函数声明为arrow函数：handleClick=（e）=>{console.log（this）；}这就是我在回答中提到的公共类字段语法。它在草稿中，还不是JS的一部分。但如果使用babel，则完全支持。

    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>
    );
  }
}