onClick

イベント処理は、タグ内にonClickなどのイベントハンドラ用の属性を指定することで定義できます。

これだけ聞くと正直気持ち悪いですよねｗ結論から言うと最終的には問題ない形でレンダリングされます。実際のサンプルコードを元に話を進めていきましょう。

おみくじComponent

今回はボタンをクリックすると、運勢がアラートされる簡単な「おみくじ」を作成してみたいと思います。

サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>おみくじ</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    class Omikuji extends React.Component {
      dropOmikuji(e){
        let unsei = ["大吉", "吉", "中吉", "小吉", "凶", "大凶"];
        let i = Math.ceil(Math.random() * 100) % unsei.length;

        alert(`あなたの運勢は${unsei[i]}です`);  // ``内に ${} で変数を埋め込めるのはES2015からの追加仕様
      }

      render() {
        return <button onClick={this.dropOmikuji}>おみくじを引く</button>;
      }
    }

    ReactDOM.render(
      <Omikuji />,
      document.getElementById('root')
    );
  </script>
</body>
</html>