javascript - React onClick 函数仅在渲染到 DOM 时触发一次

Question

我有以下 React 组件示例，它根据组件的状态将标签呈现给 DOM。目的是在单击 delete_tag anchor 后从状态的 tags 数组中删除 item。目前，我只是将其设置为提醒用户。

  getInitialState: function () {
    return {
      el: 'times',
      tags: ['dog', 'cat']
    };
  },

  render: function () {
    let that = this;
    return (
      <div id={this.state.el}>
        <div className="center-form">
          <div className="tag_div">
            { this.state.tags.map(function(item) {
                return (
                <div className="tag">
                  {item}
                  <a className="delete_tag" onClick={alert(item)}></a>
                </div>
                );
              })
            }
          </div>
        </div>
      </div>
    );
  }

使用上面的代码，在呈现每个标签之前，用户会立即收到警报。之后，标签呈现，但 delete_tag anchor 不响应任何点击。

我觉得这很奇怪，因为这个组件中的其他函数以与 onClick={that.function()} 类似的方式使用，似乎按预期工作。 为什么这个 onClick 属性没有按预期运行？

Answer 1

您需要向onClick 传递一个函数。您传递的值 - alert(item) - 不是函数，它只是 alert 的调用。

相反，您想要:

onClick={function () { alert(item); }}

或者如果您使用的是 ES6:

onClick={() => alert(item)}