アジェンダ
Reactでの開発で、ユーザーのアクションに応じて特定の関数を実行する必要があります。しかし、全てのアクションで関数を実行したいわけではないかもしれません。このような場合、三項演算子を使用して、条件に応じて関数を実行するかどうかを制御することができます。
基本構文
ReactのonClickイベントハンドラ内で三項演算子を使用する基本構文は以下の通りです。
onClick={() => 条件式 ? 関数実行() : undefined}
この構文では、条件式がtrueの場合に関数実行()が呼び出されます。falseの場合にはundefinedが返され、実質的には何も行われません。
実用例
例えば、ある条件下でのみユーザーのクリックを処理したい場合、以下のようにコードを記述できます。
<button onClick={() => isUserLoggedIn ? handleLogout() : undefined}>Logout</button>
この例では、isUserLoggedInがtrue、つまりユーザーがログイン状態であれば、handleLogout関数が実行されます。ログインしていない場合は、クリックしても何も起こりません。
まとめ
Reactでのイベントハンドリングは非常に柔軟で、三項演算子を使用することで、条件に応じて関数を実行するかどうかを簡単に制御できます。この方法は、ユーザーインターフェイスがより動的でユーザーフレンドリーになるように役立ちます。