onClickイベントに反応する

Question

何かが欠落しています。ここでは非常に単純な世界です。目標は警告イベントonClickを起動することです。ページが読み込まれるとイベントが発生しますが、ボタンをクリックした場合は発生しません。私は助けに感謝します。ここではそれが簡単に参照できるようにすることjsFiddleです：ReactJS私はこのイベントを発射するあなたの方法がうまくいくとは思わないだけではJavaScriptですのでjsFiddle

var Hello = React.createClass({ 
render: function() { 
    return <button onClick={alert("Hello World!")}> 
       Click Me 
      </button>; 
} 
React.render(<Hello />, document.getElementById('container')); 

Answer 1

私は、あなたがこの間違っについてつもりだと思います。あなたのonClickはあなたのReact要素に付けられた関数を起動するはずです。

var Hello = React.createClass({ 
    myClick: function() { 
     alert("Hello World!"); 
    }, 
    render: function() { 
     return <button onClick={this.myClick}> 
        Click Me 
       </button>; 
    } 
}); 

React.render(<Hello />, document.getElementById('container')); 

Answer 2

私は以前に問題があった理由を知りました。関数に引数を渡そうとしたときに問題が発生しました。

var Hello = React.createClass({ 
    myClick: function (text) { 
     alert(text); 
    }, 
    render: function() { 
     return <button onClick={this.myClick("Hello world")}> 
        Click Me 
       </button>; 
    } 
}); 

これは元のコードと同じ動作をします。

Answer 3

実行される関数にパラメータがある場合は、されには次のように関数にバインドする必要があります。

var Hello = React.createClass({ 
    handleClick: function (text) { 
     alert(text) 
    }, 

    render: function() { 
     return <button onClick = { 
      this.handleClick.bind(null, "Hello World") 
     } > Click Me < /button>; 
    } 
}); 

React.render(<Hello/> , document.getElementById('container')); 

これは今理にかなっています。もう一度@クリス・ホークスが正しい方向に向いてくれてありがとう。

Answer 4

注：働くクリス・ホークス、@

<button onClick={()=>{ alert('alert'); }}>alert</button>