Reactでイベントハンドラによって関数を実行する

3 min read読了の目安(約2800字

はじめに

Reactでは、親から子へとデータが流れます。
引数を取る関数に適切な実引数を与えて、子に渡し、イベントハンドラによって実行するコードの書き方を悩んだので備忘録として残します。

この記事が他の人の参考になれば幸いです。
また、この記事の内容に間違った記載がありましたら、指摘していただけるとありがたいです。

環境

名前 バージョン
macOS Big Sur 11.2.3
Node.js 14.15.4
React 17.0.2

引数を取らない関数を実行する

const ExampleButton = () => {
  const handleClick = () => {
    window.alert('サンプル')
  }

  return (
    <button onClick={handleClick}>
      Example Button
    </button>
  )
}

イベントハンドラ(onClick)によって、引数を取らない関数(func handleClick())を実行します。
注意する点として、Reactではイベントハンドラに対して関数(handleClick)を渡します。
関数の実行結果(handleClick())ではないことに注意してください。

引数を取る関数を実行する

const ExampleButton = () => {
  const handleClick = (name) => {
    window.alert('私の名前は' + name + 'です。')
  }

  return (
    <button onClick={() => {handleClick("minguu")}}>
      Example Button
    </button>
  )
}

イベントハンドラ(onClick)によって、引数を取る関数(func handleClick(name))を実行します。
onClickに渡す関数をアロー関数で新しく作成し、その関数内で実行したい関数に実引数を渡して、呼び出しています。

親から子へpropsとして渡された引数を取らない関数を実行する

const Parent = () => {
  const handleClick = () => {
    window.alert('サンプル')
  }

  return (
    <ExampleButton onClick={handleClick} />
  )
}

const ExampleButton = ({ onClick }) => {
  return (
    <button onClick={onClick}>
      Example Button
    </button>
  )
}

イベントハンドラ(onClick)によって、Parentコンポーネント内の引数を取らない関数(func handleClick())を実行します。
<ExampleButton onClick={handleClick} />のように親コンポーネントから子コンポーネントへ関数を渡します。
子コンポーネントではonClick={onClick}のようにイベントハンドラに関数を渡します。

親から子へpropsとして渡された引数を取る関数を実行する

この場合は実引数を渡すタイミングで以下の2つに分かれます。

親コンポーネントで実引数を渡す場合

const Parent = () => {
  const handleClick = (name) => {
    window.alert('私の名前は' + name + 'です。')
  }

  return (
    <ExampleButton onClick={() => handleClick('minguu')} />
  )
}

const ExampleButton = ({ onClick }) => {
  return (
    <button onClick={onClick}>
      Example Button
    </button>
  )
}

イベントハンドラ(onClick)によって、引数を取る関数(func handleClick(name))を実行します。
onClick={() => handleClick('minguu')}のように実引数は親コンポーネントで渡します。
子コンポーネントではonClick={onClick}のようにイベントハンドラに関数を渡します。

子コンポーネントで実引数を渡す場合

const Parent = () => {
  const handleClick = (name) => {
    window.alert('私の名前は' + name + 'です。')
  }

  return (
    <ExampleButton onClick={handleClick} />
  )
}

const ExampleButton = ({ onClick }) => {
  return (
    <button onClick={() => onClick('minguu')}>
      Example Button
    </button>
  )
}

イベントハンドラ(onClick)によって、引数を取る関数(func handleClick(name))を実行します。
<ExampleButton onClick={handleClick} />のように親コンポーネントから子コンポーネントへ関数を渡します。
子コンポーネントではonClick={() => onClick('minguu')}のように実行したい関数に実引数を渡し、呼び出す関数をイベントハンドラに渡しています。

参考