如何打开一个下拉项？

Question

朋友们，我有很多问题，还有一个下拉列表...我想打开任何问题，但所有问题都一起打开...请帮助

const FAQ = () => {
    

    const [isOpenAnswer, setIsOpenAnswer] = useState(false)
     const toggle = (id) => {
        questions.forEach((q) => {
            if(q.id === id){
                setIsOpenAnswer((prevState) => !prevState)
            }
        })
    }

    return <Layout>
      
        <div className="questionsBox pb-5">
            <h2 className="title pt-4 pb-4" >Frequently Asked Questions</h2>
            {questions.map((q, index) => {
                return <div className="question pl-1 pt-3 pb-3 pr-1" key={index}>
                    <div className="d-flex justify-content-between">
                        <span className="questionTitle">{q.question}</span>
                        <img className="questionIcon" 
                             src={Plus} alt="plus" 
                             onClick={() => toggle(q.id)}
                        />
                    </div>
                    {isOpenAnswer && <p className="answer pt-2 pb-2">
                        {q.answer}
                        <a href="" className="link">{q.source}</a>
                    </p>}
                </div>
            })}
        </div>
    </Layout>
}

Answer 1

你对这里的所有人都使用了相同的道具：

{isOpenAnswer && <p className="answer pt-2 pb-2">
   {q.answer}
   <a href="" className="link">{q.source}</a>
</p>}

尝试保存一些独特的状态，以确定您应该展示的内容，例如， {selectedQuestionId && /* the rest */ }

并在您当前设置 isOpenAnswer 的位置设置 selectedQuestionId 。

Answer 2

使用 Javascript object 跟踪哪个唯一 q.id 被设置为 true。

const FAQ = () => {
    const [isOpenAnswer, setIsOpenAnswer] = useState({})
     const toggle = (id) => {
        setIsOpenAnswer(prevState => ({
          ...prevState,
          [id]: !prevState[id],
        });
    }

    return <Layout>
        <div className="questionsBox pb-5">
            <h2 className="title pt-4 pb-4" >Frequently Asked Questions</h2>
            {questions.map((q, index) => {
                return <div className="question pl-1 pt-3 pb-3 pr-1" key={index}>
                    <div className="d-flex justify-content-between">
                        <span className="questionTitle">{q.question}</span>
                        <img className="questionIcon" 
                             src={Plus} alt="plus" 
                             onClick={() => toggle(q.id)}
                        />
                    </div>
                    {isOpenAnswer[q.id] && <p className="answer pt-2 pb-2">
                        {q.answer}
                        <a href="" className="link">{q.source}</a>
                    </p>}
                </div>
            })}
        </div>
    </Layout>
}

如何打开一个下拉项？

How to open one dropdown item?

reactjs

dropdown

react-hooks