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

【问题标题】：MVC-ReactJS button onclick event not get firedMVC-ReactJS 按钮 onclick 事件不会被触发
【发布时间】：2016-08-17 12:15:21
【问题描述】：

我正在创建一些简单的东西，以寻求将按钮单击事件捕获到某些文本或获得一些警报。 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 值。 我哪里做错了？

【问题讨论】：

标签： asp.net-mvc-4 reactjs react-jsx reactjs.net

【解决方案1】：

这个问题有两点需要注意

添加所有 jsx 文件 uwins 脚本标签或在 cshtml 或 Views\Shared_Layout.cshtml 文件中使用 bundle。例如 @System.Web.Optimization.Scripts.Render("~/bundles/main")
之后调用 @Html.ReactInitJavaScript() 方法。

现在点击事件肯定会起作用。

【讨论】：

【解决方案2】：

也许你希望如此：

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

使用this 代替self

【讨论】：

是的，它也适用于我，但与 MVC 和 reactJS.net 一起使用时不起作用