react.js: Javascript in spitzen Klammern funktioniert nicht

Question

Aus irgendeinem Grund, wenn ich versuche, JavaScript in den Winkel Teil des HTML-Teils einzugeben, funktioniert es nicht. Ich benutze Thymeleaf.

Hier ist der HTML-Teil:

<button className="btn btn-info" onClick={this.displayInfo}>Click for info about {firstName[i]}</button> 

So in diesem Fall funktioniert es nicht und gibt einen Fehler zurück:

unexpected error (type=Internal Server Error, status=500) Exception parsing document 

Wenn ich die onClick={this.displayInfo} entfernen wird es funktionieren.

meine Funktion:

displayInfo(){ 
     console.log("it worked"); 
    } 

The render() function: 
    render(){ 
     var {number, firstName, lastName} = this.state; 
     var rows = []; 
     for (var i in number) 
     { 
      rows[i] = (<tr> 
         <td>{number[i]}</td> 
         <td>{firstName[i]}</td> 
         <td>{lastName[i]}</td> 
         <td><button className="btn btn-info" onClick={this.displayInfo()}>Click for info about {firstName[i]}</button></td> 
         </tr>); 
     } 
     var headers = <tr><th>Number</th><th>First Name</th><th>Last Name</th><th>Extra Info</th></tr>; 
     return (<table className="table table-bordered"> 
            <thead>{headers}</thead> 
            <tbody>{rows}</tbody> 
            </table>); 
    } 

Answer 1

war ich immer den Fehler, da Thyemleaf dachte, dass ich tippte HTML: Ich habe gerade hinzugefügt:

/*<![CDATA[*/ 
    ... 
    /*]]>*/ 

Answer 2

Try this:

<button className="btn btn-info" onClick={() => this.displayInfo()}>Click for info about {firstName[i]}</button> 

sollten Sie einen Pfeil Funktion in Ihrem OnClick-Ereignis passieren