MVC-ReactJSボタンのonclickイベントが起動しない

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ページにレンダリングさ

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

が、クリックイベントにthis.state.message値を変更することができません。 ここで私は間違いをしていますか？

Answer 1

たぶん、あなたがそう望む：

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

使用thisではなくself

Answer 2

この問題を気にする必要がある2つの事

1. があり、すべてのjsxを追加します。 f cshtmlまたはViews \ Shared_Layout.cshtmlファイルでスクリプトタグを使用するか、バンドルを使用します。例えばSystem.Web.Optimization.Scripts.Render（ "〜/バンドル/メイン"）

2. その後コール@Html.ReactInitJavaScript()方法@ 。

今すぐクリックしてください。