事件处理程序上的 Reactjs 函数绑定

【问题标题】：Reactjs function binding on event handler事件处理程序上的 Reactjs 函数绑定
【发布时间】：2019-05-27 13:57:33
【问题描述】：

我试图理解为什么我们必须将对象 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")？

【问题讨论】：

添加null后是否按预期工作？
这个[链接]可能重复，你可以从这个链接得到解释（stackoverflow.com/questions/38334062/…）
传递null 不应该工作。你确定有吗？

标签： javascript reactjs ecmascript-6

【解决方案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 作为第一个参数绑定实例作为上下文，就像第二段中的箭头函数）

【讨论】：