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

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

公式のドキュメントはありますか？

下記になります。公式 Handling Events – React A JavaScript library for building user interfaces

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

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

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

2022 12/11

2022年12月11日

悩んでいる人

ReactのonClickイベントで引数を渡す方法が知りたいんだけど、よく分からないんだよね…

こんな疑問にお答えします。

この記事で分かること

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

本記事の執筆者

プロフィール

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

いずみん

本記事を書いている僕はエンジニア歴7年です。
Reactは業務経験があるので、かなり有益な情報を発信できるかと思います。

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

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

いずみん

すぐ読み終わるので、是非最後まで読んでみてください。

＼年収が2倍に？！／

今すぐエージェントを見てみる

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;

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

いずみん

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

よくある質問｜onClickイベントで引数を渡す方法

onClickイベントで引数を渡すにはどうすればよいですか？: アロー関数を使えばOKです。
公式のドキュメントはありますか？: 下記になります。

公式

Handling Events – React A JavaScript library for building user interfaces