在 React 中，为什么我必须绑定一个 onClick 函数而不是调用它？

Question

在 this tutorial 中，他使用带有绑定的 onClick 函数。

<Card onClick={that.deletePerson.bind(null, person)} name={person.name}></Card>

当我像这样移除绑定时

<Card onClick={that.deletePerson(person)} name={person.name}></Card>

我收到一个错误

Uncaught Error: Invariant Violation: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

我知道 bind 的作用，但为什么这里需要它？ onClick不是直接调用函数吗？

（代码在这个JSbin中：https://jsbin.com/gutiwu/1/edit）

Answer 1

他正在使用 bind 以便 deletePerson 方法获得正确的 person 参数。

因为 Card 组件没有获得完整的 Person 对象，这使他能够识别实际点击了哪个人的卡片。

在您的示例中，您删除绑定 onClick={that.deletePerson(person)} 的地方实际上是在计算函数 that.deletePerson(person) 并将其设置为 onClick。 deletePerson 方法更改组件的状态，这就是错误消息所说的内容。（您不能在渲染期间更改状态）。

更好的解决方案可能是将 id 传递到卡片中，然后在单击删除时将其传递回应用程序组件。

var Card = React.createClass({
  handleClick: function() {
    this.props.onClick(this.props.id)
  }
  render: function () {
      return (
          <div>
              <h2>{this.props.name}</h2>
              <img src={this.props.avatar} alt=""/>
              <div></div>
              <button onClick={this.handleClick}>Delete Me</button>
          </div>
      )
  }
})

var App = React.createClass({

  deletePerson: function (id) {
    //Delete person using id
  },

  render: function () {
    var that = this;
    return (
        <div>
            {this.state.people.map(function (person) {
                return (
                    <Card onClick={that.deletePerson} name={person.name} avatar={person.avatar} id={person.id}></Card>
                )
            }, this)}
          </div>
      )
  }
})

在 React 中，为什么我必须绑定一个 onClick 函数而不是调用它？

In React, why do I have to bind an onClick function rather then calling it?

javascript

bind

reactjs