在React中，为什么我必须绑定onClick函数而不是调用它？ [英] In React, why do I have to bind an onClick function rather then calling it?

问题描述

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

In this tutorial he uses an onClick function with bind.

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

当我像这样删除绑定时

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

我收到错误

未捕获错误：不变违规：setState（...）：在现有状态转换期间无法更新
（例如在 render 中）。渲染
方法应该是道具和状态的纯函数。

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 是不是直接调用函数吗？

I know what bind does, but why is it needed here? Is the onClick not calling the function directly?

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

(code is in this JSbin: https://jsbin.com/gutiwu/1/edit)

推荐答案

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

He's using the bind so that the deletePerson method gets the correct person argument.

因为卡组件未获得完整的人对象，这允许他识别实际点击了哪个人的卡。

Because the Card component doesn't get a full Person object, this allows him to identify which person's card was actually clicked.

在您的示例中，您删除了绑定 onClick = {that.deletePerson（person）} 实际上正在评估函数 that.deletePerson（person）并将其设置为onClick。 deletePerson 方法更改了组件的状态，这是错误消息所说的内容。 （在渲染过程中无法更改状态）。

In your example, where you removed the bind onClick={that.deletePerson(person)} is actually evaluating the function that.deletePerson(person) and setting that as onClick. The deletePerson method changes the Component's state, which is what the error message is saying. (You can't change state during a render).

更好的解决方案可能是将id传递给Card，并在删除点击时将其传递回app组件。

A better solution might be to pass the id into Card, and pass it back up to the app component on a delete click.

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函数而不是调用它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！