单击链接时 ReactJS 显示警告消息答案

【问题标题】：ReactJS shows alert message when link is clicked单击链接时 ReactJS 显示警告消息
【发布时间】：2016-05-12 15:15:46
【问题描述】：

以下代码显示了在map() 函数中绑定规则时的警报消息。我不希望这种情况发生。相反，我怎样才能将onClick() 绑定到每个链接，以便当用户单击链接时会显示消息？我认为这与将bind(this) 放在map() 代码中的某处有关，但无法弄清楚。感谢您的帮助！

const RuleResults = React.createClass({
  showMessage: function (rule) {
    if (rule.ShowMessageToUser == true) {
      alert(rule.MessageToUser);
    }
  },
  render: function () {

    var rules = this.props.businessRules.map((rule) => {
      return (
        <tr>
          <td>
            <a href={rule.HREF} onClick={this.showMessage(rule)} target='_blank'>{rule.Name}</a>
          </td>
        </tr>
      );
    });
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Name</th>
            </tr>
          </thead>
          <tbody>
            {rules}
          </tbody>
        </table>
      </div>
    );
  }
});

【问题讨论】：

标签： reactjs

【解决方案1】：

您应该将函数引用传递给onClick，而不是调用它。为此，您可以使用.bind 或arrow function

<a href={rule.HREF} onClick={ this.showMessage.bind(this, rule) }>..</a>
<a href={rule.HREF} onClick={ () => this.showMessage(rule) }>..</a>

Example

【讨论】：