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

时间:2018-12-30 19:07:49

标签: javascript reactjs ecmascript-6

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

1 个答案:

答案 0 :(得分:8)

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

为解决此问题,我们可以使用匿名函数:onClick={() => this.add("New Note")}
这次,单击按钮时程序会正确调用this.add("New Note")

或者我们可以利用bind()允许我们声明this上下文和我们要传递的参数这一事实,只需使用onClick={this.add.bind(this, "New Note")}(使用{{1 }}作为第一个参数将实例绑定为上下文,就像第二段中的箭头功能一样