ReactのクリックイベントはonclickではなくonClick

ReactのクリックイベントはonclickではなくonClick

ReactのクリックイベントはonclickではなくonClick

Reactコンポーネントを定義する際は、onclickでは動作しません。

onClick（Cが大文字）を使用します。※Reactではイベントはキャメルケースになります onClick,onCahnge…

<div id="koko"></div>
<script type="text/babel">
class Test extends React.Component {
  constructor (props) {
    super(props);
  }
  render() {
    const handler = (e) => {
      alert('Click');
    }
    return (
      <div onClick={handler}>押してください</div>
    )
  }
}
ReactDOM.render(
  <Test />,
  document.getElementById("koko")
)
</script>

{handler}を{this.handler}とするとクリックイベントが動作しないので注意です。

サンプル

classのメソッドとして定義する場合はbindする

render()メソッド内で記述せずにclassのメソッドとして記述する場合はコンストラクタ内でbindする必要があります。

以下では、this.aに代入しています。

<script type="text/babel">
class Test extends React.Component {
  constructor (props) {
    super(props);
    this.a = this.handler.bind(this);
  }
  // クラスのメソッド
  handler() {
    alert('Click');
  }
  render() {
    return (
      <div onClick={this.a}>click me</div>
    )
  }
}
ReactDOM.render(
  <Test />,
  document.getElementById("koko")
)
</script>

サンプル

アロー関数を使用することによりbindを省略する

コンストラクタでbindするのを省略したいです。

アロー関数はthisを束縛するので、アロー関数を使用することによってコンストラクタを省略することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Reactサンプル</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
</head>

<body>
<div id="koko"></div>
<script type="text/babel">
class Test extends React.Component {
// クラスのメソッド
handler() {
alert('Click');
}
render() {

return (
<div onClick={()=>{this.handler()}}>click me</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById("koko")
)
</script>
</body>
</html>

サンプル