Question

我正在创建简单的东西，寻求将按钮点击事件捕获到某些文本或获得一些警报。 ReactJS JSX代码粘贴在下面：

var SearchBar = React.createClass({
getInitialState: function() {
    return {message: "test"};
},
test1: function(e) {
    alert('hi');
    this.setState({message: "New Message"});
},
render: function() {
    var self = this;
    return (
        <div>
            <button onClick={self.test1}>Change Message</button>
            {this.state.message}
        </div>
    );
},

}）;

我在MVC cshtml中使用上面的SearchBar组件：

@Html.React("SearchBar", new{ })

按钮在html页面上呈现，但无法在点击事件上更改this.state.message值。 我在哪里做错了？

Answer 1

也许你这么想：

render: function() { return <div> <button onClick={this.test1}>Change Message</button> {this.state.message} </div> }

使用this代替self

Answer 2

有两件事需要关心这个问题

在cshtml或Views \ Shared_Layout.cshtml文件中添加所有 jsx 文件uwins脚本标记或使用bundle。例如 @ System.Web.Optimization.Scripts.Render（ “〜/捆绑/主”）
之后调用 @Html.ReactInitJavaScript() 方法。

现在点击活动肯定会有效。

MVC-ReactJS按钮onclick事件不会被触发

2 个答案: