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

小编典典

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

reactjs

在本教程中，他使用带有绑定的onClick函数。

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

当我这样删除绑定

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

我得到一个错误

未捕获的错误：永久违反：setState（…）：在现有状态转换（例如内render）期间无法更新。渲染方法应该纯粹是props和state的函数。

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

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

阅读 609

2020-07-22

共1个答案

小编典典

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

因为该Card组件没有完整的Person对象，所以这使他可以识别实际单击了哪个人的名片。

在您的示例中，删除绑定的onClick={that.deletePerson(person)}位置实际上是在评估功能that.deletePerson(person)并将其设置为onClick。该deletePerson方法更改了组件的状态，这就是错误消息的意思。（您不能在渲染期间更改状态）。

更好的解决方案可能是将ID传递到Card，然后单击删除将其传递回应用程序组件。

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>
      )
  }
})

2020-07-22