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

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

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

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

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

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

いずみ

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

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資歴5年(仮想通貨・FXが得意)
  • 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;

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

いずみ

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

簡単ですね!

よくある質問

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

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

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

下記になります。

まとめ

今回は、ReactのonClickイベントで引数を渡す方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • onClickで引数を渡す場合はアロー関数を使えばOK。
まとめ♪
  • おすすめ本
¥2,673 (2023/07/24 11:20時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場

Reactの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました!

  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次