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


ReactのonClickイベントで引数を渡す方法が知りたいんだけど、よく分からないんだよね…
こんな疑問にお答えします。
- 本記事の執筆者
本記事を書いている僕はエンジニア歴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です。
- 公式のドキュメントはありますか?
-
下記になります。
まとめ|onClickイベントで引数を渡す方法
今回は、ReactのonClickイベントで引数を渡す方法について解説しました。
以下が本記事のまとめになります。
- onClickで引数を渡す場合はアロー関数を使えばOK
この記事があなたのお役に立てば幸いです。
サイト内には、他にも初心者向けの記事を多く投稿していますので良ければ参考にしてみてください。
最後までお読みいただきありがとうございました!
最後に
僕が個人的におすすめするReactエンジニア向けのフリーランスエージェントをご紹介します。



エンジニアで実務経験のある方(目安は3年)はフリーランスも視野に入れましょう。
僕自身、フリーランスになって収入が2倍(年収+280万)になりました。
あなたの貴重なスキルを安売りしないようにしましょうね!
初めてのフリーランスなら「レバテックフリーランス」
- 国内最大級のフリーランスエージェント
- 案件数は約40,000件(国内最多)
- 高単価案件が豊富
- マージン率は10〜20%
レバテックフリーランスは国内最大級のフリーランスエージェントです。
高単価案件が豊富で、初めてフリーランスになる方におすすめのエージェントです。



僕も最初はレバテックを利用しましたが、おかげさまで収入が約1.5倍になりました(笑)。
正社員並みの保証なら「Midworks(ミッドワークス)」
- 正社員並みの手厚い保証
- 給与保証あり
- 非公開案件が豊富
- マージン率は一律20%
Midworksは正社員並みの手厚い保証を受けたい方におすすめのエージェントです。
非公開案件が豊富で給与保証も付いているので、安心してフリーランスにチャレンジできますよ!



ちなみに僕はMidworks経由でフルリモート案件に参画できました!
営業担当の方も真摯に対応してくれて非常に助かりました。