react classNameを変更したい

Question

react, typescript, next.js, styled-components を使って開発をしています。
useRefを使い,dom要素を取得してClickイベントが呼ばれた時にoption-containerclassNameにactiveを追加したいです。

useRefを使う前は下記のように書いていましたがClickのイベントが呼ばれた時にactiveに変更するにはどうしたらいいのでしょうか？
わかるかたいましたらご教授お願いしたいです。

selected.addEventListener("click", () => {
  optionContainer.classList.toggle("active");
 });

import React, { FunctionComponent, useRef } from "react";
import styled from "styled-components";

const Container = styled.div`
  box-sizing: border-box;
`;

const SelectBox = styled.div`
  display: flex;
  width: 136px;
  flex-direction: column;
  font-size: 16px;
  color: #a3afbf;
  .option-container {
    font-size: 14px;
    box-shadow: 0px 1px 4px rgba(109, 123, 143, 0.12),
      0px 4px 24px rgba(109, 123, 143, 0.25);
    color: rgba(0, 0, 0, 0.87);
    width: 100%;
    max-height: 0;
    opacity: 0;
    transition: all 0.2s;
    border-radius: 4px;
    overflow: hidden;
    order: 1;
    text-align: center;
    ::-webkit-scrollbar {
      width: 3px;
      background: #blue;
      border-radius: 0 4px 4px 0;
    }
    ::-webkit-scrollbar-thumb {
      background: #fff;
      border-radius: 0 4px 4px 0;
    }
  }
  .active {
    max-height: 150px;
    opacity: 1;
    overflow-y: scroll;
  }
  .option,
  .selected {
    padding: 12px 15px;
    cursor: pointer;
  }
  .option:hover {
    background: #dadee6;
  }
  .label {
    cursor: pointer;
  }
  .radio {
    display: none;
  }
  .selected {
    background: #f6f7f9;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    order: 0;
    .name {
      display: inline-block;
      color: rgba(0, 0, 0, 0.87);
      font-size: 16px;
    }
  }
  .selected::after {
    content: "";
    background: url("images/arrow_down.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 30px;
    position: absolute;
    height: 100%;
    width: 15px;
    top: 18px;
    right: 10px;
    transition: all 0.4s;
  }
  .option-container.active + .selected::after {
    background: url("images/arrow_up.svg");
    background-size: contain;
    background-repeat: no-repeat;
  }
`;

export const SelectDate: FunctionComponent = () => {
  const month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  const selected = useRef(null);
  const optionContainer = useRef(null);
  const optionList = useRef(null);

 // useRef使う前
  // const selected = document.querySelector(".selected");
  // const optionContainer = document.querySelector(".option-container");
  // const optionsList = document.querySelectorAll(".option");
  // selected.addEventListener("click", () => {
  //   optionContainer.classList.toggle("active");
  // });
  // optionsList.forEach((o) => {
  //   o.addEventListener("click", () => {
  //     selected.innerHTML = o.querySelector("label").innerHTML;
  //     optionContainer.classList.remove("active");
  //   });
  // });

  const Click = () => {
    console.log(selected.current);
    console.log(optionContainer.current);
  };
  return (
    <Container>
      <SelectBox>
        <div className="option-container" ref={optionContainer}>
          {month.map((month, i) => (
            <div className="option" key={i} ref={optionList}>
              <input type="radio" className="radio" />
              <label htmlFor="automobiles">
                <p className="name">{month}月</p>
              </label>
            </div>
          ))}
        </div>
        <div className="selected" ref={selected} onClick={Click}>
          年
        </div>
      </SelectBox>
    </Container>
  );
};

Answer 1

こんにちは

私だったら、（とり急ぎ）このように修正すると思います、というコードを回答します。

修正のポイントは以下です。

• SelectBox に prop active を追加して、これがtrue のとき、元のコードの .active に含まれていたスタイルが、.option-container のスタイルにマージされるようにした。

• SelectDate で、2つの状態値、active と　selectedMonth をuseStateする。useRef は不要。

• div.option にクリックハンドラーを追加。これがクリックされたとき、selectedMonthが更新される。

• <input type="radio"/>は不要となったのでいったん削除

以下が修正後のコードです。

import React, { FunctionComponent, useState } from "react";
import styled from "styled-components";

const Container = styled.div`
  box-sizing: border-box;
`;

type TSelectBox = {
    active: boolean
}
const SelectBox = styled.div<TSelectBox>`
  display: flex;
  width: 136px;
  flex-direction: column;
  font-size: 16px;
  color: #a3afbf;
  .option-container {
    font-size: 14px;
    box-shadow: 0px 1px 4px rgba(109, 123, 143, 0.12),
      0px 4px 24px rgba(109, 123, 143, 0.25);
    color: rgba(0, 0, 0, 0.87);
    width: 100%;
    max-height: 0;
    opacity: 0;
    transition: all 0.2s;
    border-radius: 4px;
    overflow: hidden;
    order: 1;
    text-align: center;
    ::-webkit-scrollbar {
      width: 3px;
      background: #blue;
      border-radius: 0 4px 4px 0;
    }
    ::-webkit-scrollbar-thumb {
      background: #fff;
      border-radius: 0 4px 4px 0;
    }
  ${({ active }: TSelectBox) => active && `
    max-height: 150px;
    opacity: 1;
    overflow-y: scroll;
  `}
  }
  .option,
  .selected {
    padding: 12px 15px;
    cursor: pointer;
  }
  .option:hover {
    background: #dadee6;
  }
  .label {
    cursor: pointer;
  }
  .radio {
    display: none;
  }
  .selected {
    background: #f6f7f9;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    order: 0;
    .name {
      display: inline-block;
      color: rgba(0, 0, 0, 0.87);
      font-size: 16px;
    }
  }
  .selected::after {
    content: "";
    background: url("images/arrow_down.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 30px;
    position: absolute;
    height: 100%;
    width: 15px;
    top: 18px;
    right: 10px;
    transition: all 0.4s;
  }
  .option-container.active + .selected::after {
    background: url("images/arrow_up.svg");
    background-size: contain;
    background-repeat: no-repeat;
  }
`;

export const SelectDate: FunctionComponent = () => {
    const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    const [active, setActive] = useState<boolean>(false);
    const [selectedMonth, setSelectedMonth] = useState<number>(0);

    const handleActive = () => {
        setActive(!active);
    };

    const handleSelectingOption = (month: number) => {
        setSelectedMonth(month);
        setActive(false);
    }

    return (
        <Container>
            <SelectBox active={active}>
                <div className="option-container">
                    {months.map((month, i) => (
                        <div className="option" key={i} onClick={() => handleSelectingOption(month)}>
                            <label htmlFor="automobiles">
                                <p className="name">{month}月</p>
                            </label>
                        </div>
                    ))}
                </div>
                <div className="selected" onClick={handleActive}>
                    {selectedMonth > 0 ? `${selectedMonth}月` : `年`}
                </div>
            </SelectBox>
        </Container>
    );
};

上記のコードを github.com/jun68ykt/q289304 に上げておきました。修正のコミットは、

• Improve SelectBox and SelectDate

です。補足すると、ラジオボタンを削除するなら、<label> も不要かもしれません。

以上、参考になれば幸いです。

備考

codesandbox にも上げてみました。一応、それっぽく動いているかなと思いますが、いかがでしょうか？

Comments

[退会済みユーザー]

ありがとうございます！！
大変勉強になります。

最後の行の
.option-container.active + .selected::after {
background: url("images/arrow_up.svg");
background-size: contain;
background-repeat: no-repeat;
}
`;
が適応されず画像の矢印が切り替わらないのですがどう実装したらいいでしょうか？

[jun68ykt]

どういたしまして。
ご指摘どおり、

> 画像の矢印

が切り替わるようにする修正が抜けていました。
SelectBox のprop として渡されてくる active を使うと、以下のような修正になります。

https://github.com/jun68ykt/q289304/commit/6bb1e4db272a260d85cb0b819c565a9422307cb3

[jun68ykt]

codesandbox のほうも、上記の修正を反映させました。

https://codesandbox.io/s/q289304-t4z0w

矢印が切り替わることが確認できると思います。

[退会済みユーザー]

ありがとうございます！！！

[jun68ykt]

解決したようですね、よかったです????

[退会済みユーザー]

ありがとうございました！！！

解決した後に聞いて申し訳ないですが
１月から１２月のどれかが選択されたら選択された月の文字の色を黒色にしたく以下のようにif分でclassを分けてあげてcolorのスタイルをつけようと思ったのですがifのところで　　式が必要です。というエラーになります。書いたコードは下記になります。もしよければ教えて欲しいです

<div className="selected" onClick={handleActive}>
{
if (selectedMonth !== 0) {
<p className="noSelect">
{selectedMonth > 0 ? `${selectedMonth}月` : `月`}
</p> else {
<p className="select">
{selectedMonth > 0 ? `${selectedMonth}月` : `月`}
</p>
}}
</div>

[jun68ykt]

なるほど。そのようなことをやりたいのであれば、修正方法のひとつは、SelectBox に
prop を追加して、selectedMonth　を渡し、その値によって p の color　を変えればよいかと
思います。
以下はその一例です。

https://github.com/jun68ykt/q289304/commit/95aad64cb57dfece34e604afcc71d9a0fcefaa04

[jun68ykt]

上記の修正で、

<p>{selectedMonth || ''}月</p>

としていますが、この || '' は、表示対象の数が 0 のときに 文字列として"0" 表示させないようにするために、よく使う手です。

[退会済みユーザー]

詳しくありがというございます！！！
思い通りに修正することができました

[jun68ykt]

????

[退会済みユーザー]

昨日のselectboxを使っていて追加で質問があったのでこちらに投稿しました。
https://teratail.com/questions/289537?modal=q-comp
もし良ければご教授してもらえると嬉しいです。

Answer 2

useRefを使う前は下記のように書いていましたがClickのイベントが呼ばれた時にactiveに変更するにはどうしたらいいのでしょうか？

クラス自体をstateとして管理して、Clickイベントでそれを切り替えるようにしましょう。

useRefからDOMで書き換えるというのは、React管理しているHTML要素に対してやってはいけません。

Answer 3

useStateでactiveの状態を管理させてはどうでしょうか？

コメントの指摘を受けて修正しました。

export const SelectDate: FunctionComponent = () => {
  const month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  const [selectedMonth, setSelectedMonth] = useState("年");
  const [isSelectedActive, setIsSelectedActive] = useState(false);
  const selected = useRef(null);
  const optionContainer = useRef(null);
  const optionList = useRef(null);

  const handleClickSelected = () => {
    console.log(selected.current);
    console.log(optionContainer.current);
    setIsSelectedActive(true);
  };
  
  const handleClickOption = (month) => {
    setSelectedMonth(month);
    setIsSelectedActive(false);
  };
  
  return (
    <Container>
      <SelectBox>
        <div className={"option-container" + isSelectedActive? : " active" : ""} ref={optionContainer}>
          {month.map((month, i) => (
            <div className="option" key={i} ref={optionList} onClick={()=>{handleClickOption(month.toString())}}>
              <input type="radio" className="radio" />
              <label htmlFor="automobiles">
                <p className="name">{month}月</p>
              </label>
            </div>
          ))}
        </div>
        <div className="selected" ref={selected} onClick={handleClickSelected}>
          {selectedMonth}
        </div>
      </SelectBox>
    </Container>
  );
};

Comments

[退会済みユーザー]

ありがとうございます！
上記のように修正しましたがClickを押す前にclassNameがactiveだけになってしまいます。

[退会済みユーザー]

// optionsList.forEach((o) => {
// o.addEventListener("click", () => {
// selected.innerHTML = o.querySelector("label").innerHTML;
// optionContainer.classList.remove("active");
// });
// });
clickした時に上記のも書き直したいのですがどのように書いたらいいでしょうか？

[nekoniki]

すいません。回答を修正しました。
修正後のコードでは動作しますでしょうか？

[退会済みユーザー]

ありがとうございます！！
解決できました