2016-08-17 100 views
0

我正在创建简单的东西寻求捕获按钮点击事件的一些文本或得到一些警报。 ReactJS JSX代码粘贴如下:MVC ReactJS按钮onclick事件不会被解雇

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值。 我在哪里做错了?

回答

0

也许你渴望这样:

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

使用this代替self

+0

我也使用过这种方法。但它不工作。 – NeoAsh

+0

https://jsfiddle.net/69z2wepo/53132/对我来说工作很好 – ximet

+0

是的,它也适用于我,但在使用MVC和reactJS.net时不起作用 – NeoAsh

0

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

  1. 添加所有jsx F ile uwins脚本标记或在cshtml或Views \ Shared_Layout.cshtml文件中使用包。例如 @ System.Web.Optimization.Scripts.Render( “〜/捆绑/主”)

  2. 呼叫之后@Html.ReactInitJavaScript()方法。

Now Click event surely get work。