使用ReactJS在FAQ卡中打開一個元素時如何關閉所有元素

當我單擊一個問題時，它會打開其中的文本，當我單擊另一個問題時，前一個問題會關閉但是當我打開一個問題并再次單擊同一個問題時，它不會關閉，這就是問題我認為是因為我在If 陳述句中做錯了什么

[我的專案圖片] [1]：https ://i.stack.imgur.com/MtFPf.png

import { useRef } from "react";
import img_1 from "../images/bg-pattern-desktop.svg";
import img_2 from "../images/illustration-woman-online-desktop.svg";

export default function MainContent() {
  const p1 = useRef(null);
  const p2 = useRef(null);
  const p3 = useRef(null);
  const p4 = useRef(null);
  const p5 = useRef(null);

  const elementsArray = [p1, p2, p3, p4, p5];

function hideText(element) {
    for (let i = 0; i < 5; i  ) {
       if (!elementsArray[i].current.classList.contains("not-active")) {
           elementsArray[i].current.classList.add("not-active");
       } 
       if (element.current.classList.contains("not-active")) {
           element.current.classList.remove("not-active");
      }
    }
  }

  return (
    <>
      <div className="container">
        <div className="imgBox">
          <img src={img_1} alt="img_1" className="img_1" />
          <img src={img_2} alt="img_2" className="img_2" />
        </div>

        <div className="textBox">
          <h1>FAQ</h1>
          <div className="questions">
            <div>
              <button
                onClick={() => {
                  hideText(p1);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p1} className="p1 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p2);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p2} className="p2 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p3);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p3} className="p3 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p4);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p4} className="p4 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p5);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p5} className="p5 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />
          </div>
        </div>
      </div>
    </>
  );
}

uj5u.com熱心網友回復：

您在這里想要的是在觸發按鈕上切換“非活動”類嗎？

你可以用這行代碼來做：

element.current.classList.toggle('not-active');

用舊的替換它：

if (element.current.classList.contains("not-active")) {
       element.current.classList.remove("not-active");
  }

標籤：javascript 反应 功能 if 语句 反应钩子

上一篇：Python函式多載推薦方法

下一篇：如何將文本檔案作為引數傳遞給python中的函式