reactjs zeigt eine Warnmeldung an, wenn auf die Verknüpfung geklickt wird

Question

Der folgende Code zeigt die Warnmeldung, da die Regeln in der .Map-Funktion gebunden sind. Ich möchte nicht, dass das passiert. Wie kann ich das onClick an jeden Link binden, wenn der Benutzer auf den Link klickt, wird die Nachricht dann angezeigt? Ich denke, es hat damit zu tun, .bind (this) irgendwo in den .Map Code zu stecken, kann es aber nicht herausfinden. Danke für jede Hilfe!

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

Sie sollten onClick Verweis übergeben es funktionieren statt zu nennen. Um es zu tun können Sie verwenden .bind oder 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