イベントハンドラーにパラメータを渡す方法（React/JavaScript）

2024-04-29

React onClick でイベントとパラメータを渡す方法

Reactにおいて、onClick イベントハンドラーにイベントオブジェクトと追加のパラメータを渡すことは、コンポーネント間でデータをやり取りしたり、動的なイベント処理を行ったりする際に役立ちます。

インライン関数を使用する

最もシンプルな方法は、インライン関数を使用してイベントとパラメータを渡すことです。

function handleClick(id, event) {
  console.log(`ボタン ${id} がクリックされました！`);
  // イベントオブジェクトを使用して、ボタンの位置やクリックした時間などを取得できます。
  console.log(event);
}

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

この例では、handleClick 関数はボタンの ID とイベントオブジェクトを受け取ります。ボタンがクリックされると、コンソールにボタン ID とイベントオブジェクトの内容が出力されます。

利点:

記述が簡潔

関数が毎回新しく生成されるため、パフォーマンスが低下する可能性がある
コードが冗長になる可能性がある

アロー関数を使用すると、インライン関数よりも簡潔にイベントとパラメータを渡すことができます。

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

この例は、インライン関数と同じ動作をします。

インライン関数よりも簡潔

bind() 関数を使用すると、コンポーネントメソッドをイベントハンドラーとしてバインドし、イベントオブジェクトとパラメータを渡すことができます。

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

  handleClick(id, event) {
    console.log(`ボタン ${id} がクリックされました！`);
    // イベントオブジェクトを使用して、ボタンの位置やクリックした時間などを取得できます。
    console.log(event);
  }

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

パフォーマンスが向上する
コードが整頓される

記述が少し複雑

カスタムデータ属性を使用する

HTML5 のカスタムデータ属性を使用して、イベントハンドラーにデータを渡すこともできます。

function handleClick(event) {
  const id = parseInt(event.target.dataset.id);
  console.log(`ボタン ${id} がクリックされました！`);
  // イベントオブジェクトを使用して、ボタンの位置やクリックした時間などを取得できます。
  console.log(event);
}

return <button data-id="1" onClick={handleClick}>ボタン 1</button>;

この例では、ボタンに data-id 属性が追加され、ボタン ID が設定されています。ボタンがクリックされると、handleClick 関数はイベントオブジェクトとボタン ID を受け取ります。

記述がシンプル

イベントハンドラーが複雑になる可能性がある

適切な方法を選択する

シンプルなイベント処理: インライン関数またはアロー関数が適しています。
パフォーマンスが重要: bind() 関数を使用します。
コードの可読性: カスタムデータ属性を使用します。

どの方法を選択する場合でも、イベントオブジェクトとパラメータをどのように使用するのかを明確にしておくことが重要です。

その他のリソース

[JavaScript でイベントハンドラに引数

React onClick でイベントとパラメータを渡す - サンプルコード

以下のサンプルコードは、前面で説明した 4 つの方法それぞれを実装しています。

インライン関数

import React from 'react';

function App() {
  return (
    <div>
      <button onClick={() => handleClick(1)}>ボタン 1</button>
      <button onClick={() => handleClick(2)}>ボタン 2</button>
    </div>
  );
}

function handleClick(id, event) {
  console.log(`ボタン ${id} がクリックされました！`);
  console.log(event);
}

export default App;

アロー関数

import React from 'react';

function App() {
  return (
    <div>
      <button onClick={(event) => handleClick(1, event)}>ボタン 1</button>
      <button onClick={(event) => handleClick(2, event)}>ボタン 2</button>
    </div>
  );
}

function handleClick(id, event) {
  console.log(`ボタン ${id} がクリックされました！`);
  console.log(event);
}

export default App;

bind() 関数

import React from 'react';

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

  handleClick(id, event) {
    console.log(`ボタン ${id} がクリックされました！`);
    console.log(event);
  }

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

export default App;

カスタムデータ属性

import React from 'react';

function App() {
  return (
    <div>
      <button data-id="1" onClick={handleClick}>ボタン 1</button>
      <button data-id="2" onClick={handleClick}>ボタン 2</button>
    </div>
  );
}

function handleClick(event) {
  const id = parseInt(event.target.dataset.id);
  console.log(`ボタン ${id} がクリックされました！`);
  console.log(event);
}

export default App;

これらのサンプルコードは、onClick イベントハンドラーにイベントオブジェクトとパラメータを渡すための基本的な方法を示しています。実際の使用例では、必要に応じてコードを拡張することができます。

上記のサンプルコードは、React 18 で動作することを確認しています。
TypeScript を使用している場合は、型付けを追加する必要があります。

React onClick でイベントとパラメータを渡す方法 - その他の方法

前面で紹介した方法に加え、React onClick でイベントとパラメータを渡すには、以下のような方法があります。

Context API を使用すると、コンポーネント階層全体でデータを共有することができます。イベントハンドラーとパラメータを Context に格納し、子コンポーネントが useContext フックを使用してアクセスできるようにすることができます。

この方法は、コンポーネント階層全体でイベントハンドラーを共有する必要がある場合に役立ちます。

例:

import React, { createContext, useContext } from 'react';

const MyContext = createContext({
  handleClick: () => {},
});

function App() {
  const { handleClick } = useContext(MyContext);

  return (
    <MyContext.Provider value={{ handleClick: () => console.log('ボタンがクリックされました！') }}>
      <div>
        <button onClick={handleClick}>ボタン</button>
      </div>
    </MyContext.Provider>
  );
}

export default App;

カスタムフックを使用して、イベントハンドラーとパラメータを再利用可能なロジックとしてカプセル化することができます。子コンポーネントは use フックを使用してカスタムフックにアクセスし、イベントハンドラーとパラメータを取得することができます。

この方法は、イベントハンドラーを複数のコンポーネントで共有する必要がある場合に役立ちます。

import React, { useState, useEffect } from 'react';

function useButton(id) {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return {
    count,
    handleClick,
  };
}

function App() {
  const { count, handleClick } = useButton(1);

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

export default App;

render props を使用すると、親コンポーネントから子コンポーネントにイベントハンドラーとパラメータを props として渡すことができます。子コンポーネントは、渡された props を使用してイベントハンドラーを呼び出し、パラメータにアクセスすることができます。

import React from 'react';

function App() {
  const handleClick = (id) => {
    console.log(`ボタン ${id} がクリックされました！`);
  };

  return (
    <div>
      <Button onClick={handleClick} id={1} />
      <Button onClick={handleClick} id={2} />
    </div>
  );
}

function Button(props) {
  const { onClick, id } = props;

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

export default App;