Reactjs函数绑定事件处理程序

Question

我试图理解为什么我们必须将对象null绑定到函数

add(text) {
    this.setState(prevState=> ({
        notes: [
            ...prevState.notes,
            {
                id: this.nextId(),
                note: text
            }
        ]
    }))
}

render() {
    return (
        <div className="board">
            {this.state.notes.map(this.eachNote)}
            <button onClick={this.add.bind(null, "New Note")}
                id="add">Add note</button>
        </div>
    )
}

为什么我们不能这样做this.add("New Note") ？

Answer 1

onClick={this.add("New Note")}会立即运行add()方法，然后将结果设置为onClick 。 add()的结果是未定义的，因为它不返回任何内容。 所以我们基本上做onClick={undefined} 。

所以要解决这个问题，我们可以使用匿名函数： onClick={() => this.add("New Note")}
这次，程序在单击按钮时正确调用this.add("New Note") 。

或者我们可以利用bind()允许我们声明this上下文和我们想要传递的参数的事实，并简单地使用onClick={this.add.bind(this, "New Note")} （使用this作为第一个参数将实例绑定为上下文，就像第2段中的箭头函数一样）