web-dev-qa-db-ja.com

React onClickイベント

私は何かが欠けています。これは非常にシンプルなハローワールドです。目標は、アラートイベントonClickを発生させることです。このイベントは、ページが読み込まれたときに発生しますが、ボタンをクリックしたときに発生しません。私は助けに感謝します。見やすくするためのjsFiddleを次に示します。 jsFiddle

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

ReactJSは単なるJavaScriptであるため、あなたはこの間違った方向に進んでいると思います。 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'));
24
Chris Hawkes

注：これは、何かをすばやく/インラインにしたい場合の別の方法です。

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

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

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'));

これは今理にかなっています。正しい方向に私を向けてくれて、@ Chris-Hawkesに再び感謝します。

3
Ivan Histand

今、私は前に問題があった理由を見る。問題は、関数に引数を渡そうとしたときに発生しました。

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

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

0
Ivan Histand