Question

以下代码显示警报消息，因为规则已在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>
    );
  }
});

Answer 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

ReactJS在单击链接时显示警报消息

1 个答案: