Question

出于某种原因，当我尝试在HTML部分的角度部分输入JavaScript时，它不起作用。我使用的是Thymeleaf。

这是HTML部分：

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

所以在这个例子中它不起作用并返回错误：

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>);
    }

Answer 1

试试这个：

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

您应该在onClick事件中传递箭头功能

Answer 2

我收到错误是因为Thyemleaf认为我在键入HTML：我刚补充一下：

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

react.js：尖括号中的javascript不起作用

2 个答案: