reactjs在单击链接时显示警告消息

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

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

Example