アロー関数でスッキリ！React.js onClickイベントハンドラに値を渡す方法

2024-04-02

React.js onClickで値をメソッドに渡す方法

値を渡す方法

アロー関数を使う

最も簡単な方法は、onClickイベントハンドラにアロー関数を使うことです。アロー関数では、イベントオブジェクトeを受け取り、その引数として必要な値を渡すことができます。

const MyComponent = () => {
  const handleClick = (value) => {
    // ここでvalueを受け取って処理を行う
    console.log(value);
  };

  return (
    <button onClick={() => handleClick(10)}>ボタン</button>
  );
};

bindを使う方法も有効です。bindは、関数を呼び出す際に、thisオブジェクトと引数を設定することができます。

const MyComponent = () => {
  const handleClick = (value) => {
    // ここでvalueを受け取って処理を行う
    console.log(value);
  };

  return (
    <button onClick={this.handleClick.bind(this, 10)}>ボタン</button>
  );
};

data属性を使って、ボタン要素に値を埋め込む方法もあります。イベントハンドラ側では、e.target.dataset.valueで値を取得することができます。

const MyComponent = () => {
  const handleClick = (e) => {
    // ここでe.target.dataset.valueを受け取って処理を行う
    console.log(e.target.dataset.value);
  };

  return (
    <button data-value="10" onClick={handleClick}>ボタン</button>
  );
};

以上の3つの方法のいずれかを使うことで、React.js onClickイベントハンドラに値を渡すことができます。それぞれの方法のメリットとデメリットを理解し、状況に応じて使い分けましょう。

アロー関数を使う

const MyComponent = () => {
  const handleClick = (value) => {
    // ここでvalueを受け取って処理を行う
    console.log(value);
  };

  return (
    <>
      <button onClick={() => handleClick(10)}>ボタン1</button>
      <button onClick={() => handleClick(20)}>ボタン2</button>
    </>
  );
};

return文では、2つのボタン要素が返されています。それぞれのボタン要素にはonClickイベントハンドラが設定されており、handleClick関数を呼び出す際に、10と20という値が引数として渡されています。

bindを使う

const MyComponent = () => {
  const handleClick = (value) => {
    // ここでvalueを受け取って処理を行う
    console.log(value);
  };

  return (
    <>
      <button onClick={this.handleClick.bind(this, 10)}>ボタン1</button>
      <button onClick={this.handleClick.bind(this, 20)}>ボタン2</button>
    </>
  );
};

このコードは、1つ目のサンプルコードと似ていますが、onClickイベントハンドラにbindを使用しています。bindは、handleClick関数を呼び出す際に、thisオブジェクトと10または20という値を第一引数として渡します。

data属性を使う

const MyComponent = () => {
  const handleClick = (e) => {
    // ここでe.target.dataset.valueを受け取って処理を行う
    console.log(e.target.dataset.value);
  };

  return (
    <>
      <button data-value="10" onClick={handleClick}>ボタン1</button>
      <button data-value="20" onClick={handleClick}>ボタン2</button>
    </>
  );
};

このコードでは、ボタン要素にdata-value属性を使って値を埋め込んでいます。handleClickイベントハンドラでは、e.target.dataset.valueを使って、ボタン要素から値を取得しています。

その他のonClickイベントハンドラに値を渡す方法

関数式を使う

const MyComponent = () => {
  const handleClick = (value) => {
    // ここでvalueを受け取って処理を行う
    console.log(value);
  };

  return (
    <button onClick={function() { handleClick(10); }}>ボタン</button>
  );
};

refを使う

const MyComponent = () => {
  const buttonRef = React.createRef();

  const handleClick = () => {
    // ここでbuttonRef.current.valueを受け取って処理を行う
    console.log(buttonRef.current.value);
  };

  return (
    <>
      <input ref={buttonRef} value="10" />
      <button onClick={handleClick}>ボタン</button>
    </>
  );
};

このコードでは、refを使ってボタン要素への参照を取得しています。handleClickイベントハンドラでは、buttonRef.current.valueを使って、ボタン要素の値を取得しています。

状態変数を使う

const MyComponent = () => {
  const [value, setValue] = React.useState(10);

  const handleClick = () => {
    // ここでvalueを受け取って処理を行う
    console.log(value);
  };

  return (
    <>
      <button onClick={handleClick}>ボタン</button>
      <button onClick={() => setValue(20)}>値を変更</button>
    </>
  );
};