从中选择每个单独的按钮以切换 css class 但是当我只执行列表中的最后一项时，反应中会显示

Question

以下是我的组件的代码

import React from 'react'
import Wrapper from '../../assets/css/LandingPageSmallerSectionCss/faqSectioncss'
// import FaqComponent from '../../components/faqComponent'
import faqs from '../../utils/faqs'

const FaqSection = () => {
    const ref = React.createRef();
    const toggleHandler = (e) => {
         e.preventDefault()
         ref.current.classList.toggle('.show-more')
     }
    return (
        <Wrapper>
            <div className="faq-container">
                <h1 className="faqs-header" style={{ color: "rgb(40, 102, 129)" }}>FAQs</h1>
                <div className="list-container">
                    <ul>
                        {faqs.map((faq) => {
                            const { id, question, answer } = faq
                            return (
                                <li key={id}>
                                    <p>{question}</p>
                                    <button className="toggle-more-btn" onClick={toggleHandler}></button>
                                    <p className="faq-text" ref={ref}>{answer}</p>
                                </li>
                            )
                        })}
                    </ul>
                </div>
            </div>
        </Wrapper>
    )
}

export default FaqSection

我可以在纯 javascript 和纯 html 中实现切换代码，但我无法将其转换为 React，因为 React 没有 queryselectorAll 因此我遇到了麻烦，以下是纯 javascript

的代码

let listContent= document.querySelectorAll('.faq-text')
let buttonContent = document.querySelectorAll('.toggle-more-btn')
const listArray=Array.from(listContent)
const buttonArray=Array.from(buttonContent)

//display both array list

// console.log(listArray)
// console.log(buttonArray)

//check if individual examples buttons are coherent with each other

// if (buttonArray[0] && listArray[0]) {
//     buttonArray[0].addEventListener('click',(e)=>{
//         listArray[0].classList.toggle('poopoo')
//     })
// }
// if (buttonArray[1] && listArray[1]) {
//     buttonArray[1].addEventListener('click',(e)=>{
//         listArray[1].classList.toggle('poopoo')
//     })
// }

//loop through all buttons in the list and if both the index of the button and list match
// for (let i = 0; i < buttonArray.length; i++) {
//     if (buttonArray[i]&&listArray[i]) {
//      buttonArray[i].addEventListener('click',e=>{
//      listArray[i].classList.toggle('poopoo')
//        })}   
// }


// create funcion that works with individual array indexes
//experimental

const buttonPress=(button,list)=>{
    for (let i = 0; i < button.length; i++) {
        if (button[i]&&list[i]) {
            button[i].addEventListener('click',e=>{
                list[i].classList.toggle('show-more')
                button[i].classList.toggle('rotate-btn')
            })
        }
    }
}
buttonPress(buttonArray,listArray)

我为此花费了数小时。如果有人能回答我，我将不胜感激？

Answer 1

到目前为止有几件事：

处理程序函数的名称与调用的名称不同。
你 css class .show-more 上的 DOT！花了一段时间（和 console.log 才找到这个）。
我不认为你首先想要 ref。

下面是我可能会使用一些钩子来做的事情。我假装第一次加载 useEffect，使用空数组 arg。然后，我将在列表“faqs”的克隆中设置更改的 faq 条目，然后将我的临时数组传播到 setFaqs。这是使用 useState 钩子，通常你给它一个变量名，然后是一个 setter 函数名（对于这些 built-ins React 负责在后台实际设置 - 包括默认我有一个空数组）。

import { useEffect, useState } from "react";
import "./styles.css";

const mockServerReturn = [
  { id: 0, question: "Foo?", answer: "Bar!" },
  { id: 1, question: "Baz?", answer: "Bar!" },
  { id: 2, question: "Bar?", answer: "Bar!" }
];

const FaqSection = () => {
  const [faqs, setFaqs] = useState([]);

  useEffect(() => setFaqs(mockServerReturn), []);

  const toggleHandler = (e) => {
    e.preventDefault();
    const temp = [...faqs];
    temp[e.target.id].chosen = !temp[e.target.id].chosen;
    setFaqs([...temp]);
  };

  return (
    <>
      <div className="faq-container">
        <h1 className="faqs-header">FAQs</h1>
        <div className="list-container">
          <ul>
            {faqs.map((faq) => {
              const { id, question, answer, chosen } = faq;
              return (
                <li key={id}>
                  <p>{question}</p>
                  <button
                    className="toggle-more-btn"
                    onClick={toggleHandler}
                    id={id}
                  >
                    I choose {id}
                  </button>
                  <p className={`faq-text${chosen ? " show-more" : ""}`}>
                    {id}:{answer}:{chosen?.toString()}
                  </p>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <FaqSection />
    </div>
  );
}

从中选择每个单独的按钮以切换 css class 但是当我只执行列表中的最后一项时，反应中会显示

selecting each individual button from the to toggle a css class but when I do only the last item in the list is shown in react

javascript

reactjs

react-hooks