2016-08-17 40 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。