处理 JSX 中函数调用

问题

<button onClick={this.setKey(key)} />
1

虽然期望的是传递函数引用,然而实际上是函数调用,为了解决这个问题通常存在一些解决方案。

解决

1. 传递一个函数引用

<button onClick={() => this.setKey(key)} />
1

2. 函数修改为闭包

vm = {
  setKey(key) {
    return () => console.log(key);
  }
}

<button onClick={this.setKey(key)} />
1
2
3
4
5
6
7

3. 使用 bind 方法

<button onClick={this.setKey.bind(this, key)} />
1
最后更新时间: 1 年前