React onClick函數僅在渲染到DOM時觸發一次

Question

我有一個React組件的示例，它根據組件的狀態將標記呈現給DOM。 目的是在單擊delete_tag錨點后從狀態的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錨點不會響應任何點擊。

鑒於此組件中的其他函數以與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沒有任何回調