【React】onClickでclassNameをつけたり外したりする方法

2021 / 08 / 07 2022 / 01 / 31

Gatsby
React

Data illustrations by Storyset

React開発していて、以下のように思うことありませんか？

「ある要素をクリックした時にclassNameをつけたり外したりをReactならではの機能で実装できないかな」

今回は上記の悩みにお答えします。

素のJavaScriptであれば普通に書けるかもですね。
でも、せっかくReactを使うならもっと効率的に書きたくないですか？

そこで役に立つのが「 useState 」です。

この記事では、 useState を使って「 ある要素をクリックした時にclassNameをつけたり外したりする機能 」を実装する方法を解説します。

useStateをインポートして使う

ここでは、Reactの基本的な開発環境を想定して解説していきます。
App.jsに、以下のように記述してください。

/* App.js */
/* 「useState」をインポートする↓ */
import React, { useState } from "react";
import "./styles.css";
const App = () => {
  /* state変数を定義する↓ */
  const [active, setActive] = useState(false);
  return (
      <h1>Hello, world!</h1>
      <button>classNameをつけたり外したりする</button>
    </div>
export default App;

まず、 useState を使うためにインポートします。
そして、 state変数 を定義します。

「 active 」という変数を定義し、デフォルト値は false としています。
「active = false」がデフォルトです。

そしてなんらかの処理を行うことで、「active」は「 setActive 」として更新されます。

activeを更新する関数を定義する

なかなかピンと来ないかと思いますが、実際にやってみましょう。
App.jsに、以下のように記述を追加してください。

/* App.js */
import React, { useState } from "react";
import "./styles.css";
const App = () => {
  const [active, setActive] = useState(false);
  /* 「classToggle」という関数を定義↓ */
  const classToggle = () => {
    setActive(!active)
  return (
    ... 略 ...
export default App;

まず、「 classToggle 」という関数を定義しています。
どんな関数かと言うと...

先ほど定義したstate変数の「 active 」のデフォルトは false です。
「classToggle」が発動すると、「active」が true に変わります。

もう一度「classToggle」が発動すると「active」は false に変わります。
つまり、 「classToggle」で「active」のtrue、falseを切り替える ことができます。

切り替わった「active」は「setActive」という変数で更新します。
そのため「 setActive(!active) 」という書き方になります。

ボタンクリックで関数を発動させる

あとは、「classToggle」を どうやって発動させるか を決めます。
今回は、「 ボタンをクリックした時 」に「classToggle」を発動させます。

/* App.js */
import React, { useState } from "react";
import "./styles.css";
const App = () => {
  const [active, setActive] = useState(false);
  const classToggle = () => {
    setActive(!active)
  return (
      {/* classNameを追加↓ */}
      <h1 className={active ? "red" : ""}>Hello, world!</h1>
      {/* ↓クリックで「classToggle」が発動するように設定 */}
      <button onClick={classToggle}>classNameをつけたり外したりする</button>
    </div>
export default App;

そこで、buttonタグに「onClick={classToggle}」と記述しています。
これにより、ボタンをクリックした時に「classToggle」が発動します。

そしてボタンをクリックするたびに、 「active」のtrue、falseが切り替わります 。
これを利用して以下の状態を作ります。

「active」が true の時に「 red 」というclassNameをつける
「active」が false の時は「 red 」というclassNameを外す

h1タグには次のように記述しました。

<h1 className={active ? "red" : ""}>Hello, world!</h1>
{/* 略さず書くとこちら↓ */}
<h1 className={active === true ? "red" : ""}>Hello, world!</h1>

こう書くことにより、以下のようになります。

「active」が true の時は「 className="red" 」となる
「active」が false の時は「 className="" 」となる

三項演算子 という書き方で、条件分岐を記述しています。

すでに別のclassNameがある場合でも大丈夫です。

例えば、「 hello 」というclassNameがすでにあるとします。
そこに、「 red 」というclassNameをつけたり外したりしたい場合は以下のように書きます。

{/* すでに別のclassNameがある場合 */}
<h1 className={`hello ${active ? "red" : ""}`}>Hello, world!</h1>

あとは cssを適用させる だけです。
例として、styles.cssを以下のように記述してみましょう。

/* styles.css */
.red {
  color: red;