Question

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

  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锚点不响应任何点击。

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

Answer 1

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

相反，你想要：

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

或者如果你正在使用ES6：

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

Answer 2

将onClick更改为：

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

这应该有效，因为现在你给出了将被称为onClick回调的函数。在您的版本中，它被称为imediatelly，而onClick没有任何内容作为回调

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

2 个答案: