【30秒で完結】ReactのonClickイベントで引数を渡す方法

Q: onClickイベントで引数を渡すにはどうすればよいですか？

アロー関数を使えばOKです。

2023年7月29日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

onClickに引数がない場合は？
onClickで引数を渡す場合は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴8年）で、資格は13個保有しています。

結論、ReactのonClickイベントで引数を渡すのは非常に簡単です。

本記事を読めば、ReactのonClickイベントで引数を渡す方法が理解できるので早速見ていきましょう！

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいね♪

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴5年
ブランドせどりで月利50万円⇨脱サラ
Twitterフォロワー約2,000人

いずみです

onClickに引数がない場合

const App = () => {
  unchi = () => {
    console.log('うんち爆弾');
  };

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

export default App;

onClickに引数がない場合は↑で動作します。

onClickで引数を渡す場合

onClickで引数を渡す場合の「ダメな例」と「良い例」を解説します。

ダメな例

const App = () => {
  unchi = (val) => {
    console.log('うんち爆弾');
  };

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

export default App;

↑だと動作しません。

静的解析を導入している場合は、下記のエラーが出ます。

型 'void' を型 '(e: UIEvent) => void' に割り当てることはできません。ts(2322)
App.tsx(8, 3): 予期された型は、型 'IntrinsicAttributes & Pick & InexactPartial<Pick> & InexactPartial' に対してここで宣言されたプロパティ 'onClick' から取得されています
onClick={unchi('1')}

良い例

const App = () => {
  unchi = (val) => {
    console.log('うんち爆弾');
  };

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

export default App;

↑のコードは問題なく動作します。

いずみ

関数の中で引数ありの関数を実行しています。

簡単ですね！