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

JavaScript

2022.06.172021.03.10

こんにちは。

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

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

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

単純なクリック
引数を渡そうとしてハマったコード
引数を渡せたコード
検証
追記2022.6.17 関数コンポーネントを使った実装

単純なクリック

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

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

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

React クリックイベントの基本形

たろReactのクリックイベントの実装方法がわからない。こんな疑問を解決します。本記事の内容Reactのクリックイベントの実装方法の紹介具体的なコードと実演も合わせて紹介Reactのクリックイベントの基本形をメモしておきます。初めて学ぶ言語...

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

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

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

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

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

【ここでの問題の推測】

ページ読み込み時に handleClick メソッドに直接引数の値が渡ってしまったことが原因ではないかと考えています。

引数を渡せたコード

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

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

ユーザインターフェース構築のためのJavaScriptライブラリ

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

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

検証

追記2022.6.17 関数コンポーネントを使った実装

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    const buttonAlert = (e) => {
        alert('誕生日は' + e + 'です。');
    }

    return (
        <div className="App">
            <header className="App-header">
                Learn React App
            </header>
            <body>
                <div>
                    <button onClick={() => buttonAlert('5月12日')}>ボタン</button>
                </div>
            </body>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

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

マイナビ出版