react.js : javascript 在尖括号中不起作用
react.js : javascript in angle brackets not working
出于某种原因,当我尝试将 JavaScript 输入到 HTML 部分的角度部分时,它不起作用。我正在使用 Thymeleaf。
这是 HTML 部分:
<button className="btn btn-info" onClick={this.displayInfo}>Click for info about {firstName[i]}</button>
所以在这种情况下它不起作用并且 returns 一个错误:
unexpected error (type=Internal Server Error, status=500) Exception parsing document
如果我删除 onClick={this.displayInfo}
它将起作用。
我的函数:
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>);
}
试试这个:
<button className="btn btn-info" onClick={() => this.displayInfo()}>Click for info about {firstName[i]}</button>
你应该在你的 onClick 事件中传递一个箭头函数
我收到错误是因为 Thymeleaf 认为我在输入 HTML:
我刚刚添加了这个:
/*<![CDATA[*/
...
/*]]>*/
出于某种原因,当我尝试将 JavaScript 输入到 HTML 部分的角度部分时,它不起作用。我正在使用 Thymeleaf。
这是 HTML 部分:
<button className="btn btn-info" onClick={this.displayInfo}>Click for info about {firstName[i]}</button>
所以在这种情况下它不起作用并且 returns 一个错误:
unexpected error (type=Internal Server Error, status=500) Exception parsing document
如果我删除 onClick={this.displayInfo}
它将起作用。
我的函数:
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>);
}
试试这个:
<button className="btn btn-info" onClick={() => this.displayInfo()}>Click for info about {firstName[i]}</button>
你应该在你的 onClick 事件中传递一个箭头函数
我收到错误是因为 Thymeleaf 认为我在输入 HTML: 我刚刚添加了这个:
/*<![CDATA[*/
...
/*]]>*/