React onClick イベントで引数を渡す方法

こんにちは。

React の onClick イベント引数を渡そうとしたときに、ガッツしハマったのでやり方を忘れぬようにまとめました。（数時間費やした〜〜悲しみ。）

今回は特に以下の3点についてまとめます。

• 単純なクリック
• 引数を渡そうとしてハマったコード
• 引数を渡せたコード

単純なクリック

まずは単純なクリックイベントの設定。

ボタンをクリックするとアラートが表示されます。

Reactにおけるクリックイベントの基本形です↓

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('クリックされました。');
  }

  render () {
    return (
      <div>
        <button onClick={this.handleClick}>ボタン</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

引数を渡そうとしてハマったコード

次にクリック時に引数で値を渡そうと考えた際にハマったコード。

下記のコードの場合、読み込み時にアラートイベントが発火してしまいました。

つまり、ページ読み込み時にクリックをしていないにも関わらずアラートが表示されてしまいます。

class App extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(option) {
    alert(option + 'クリックされました。');
  }

  render () {
    return (
      <div>
        <button onClick={this.handleClick('再生ボタンが')}>ボタン</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

引数を渡せたコード

そこで、引数を渡したいところにアロー関数を採用します。

onClick内に{() => this.handleClick(‘再生ボタンが’)}と記述します。

class App extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(option) {
    alert(option + 'クリックされました。');
  }

  render () {
    return (
      <div>
        <button onClick={() => this.handleClick('再生ボタンが')}>ボタン</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

この実装方法はReatチュートリアル「イベントハンドラやコールバックにパラメータを渡すには？」で紹介されていた方法です。

アロー関数を採用してイベント発火時にコールバック関数を呼ぶことで解決しているようです。

下の検証で「引数を渡せたコード」のコードを実装したボタンを用意したので試してみてください！

検証

ぼくの React 開発はこの↓本から始まりました。