この記事で解決できる悩み
いずみ
こんな悩みを解決できる記事を書きました!
僕は現役フリーランスエンジニア(歴9年)で、資格は13個保有しています。
結論、ReactのonClickイベントで引数を渡すのは非常に簡単です。
本記事を読めば、ReactのonClickイベントで引数を渡す方法が理解できるので早速見ていきましょう!
すぐ読み終わるので、ぜひ最後まで読んでくださいね♪
目次
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イベントで引数を渡すにはどうすればよいですか?
アロー関数を使えばOKです。
公式のドキュメントはありますか?
下記になります。
Handling Events – React
A JavaScript library for building user interfaces
まとめ
今回は、ReactのonClickイベントで引数を渡す方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Reactの勉強なら「React.js&Next.js超入門 第2版
最後までお読みいただき、ありがとうございました!
- クソおすすめ本
海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。