问题描述
问题 - 当我单击一个按钮显示答案文本时,另一个按钮也会打开。我只希望每个问题的答案在我点击时打开。
我的代码 -
.root {
-fx-background-color: beige;
}
解决方法
将您的 isOpen
设置为一个对象,然后根据需要将布尔值分配为 isOpen[index]=false|true
。在 HTML 中,绑定为 isOpen[i] &&...
您在这里所做的问题是变量 isOpen
与您的 Questions
对象无关。
您可以将 isOpen
更改为一个对象并像这样设置。
const [isOpen,setIsOpen] = useState({})
const toggle = (i) => setIsOpen({...isOpen,[i]:!isOpen[i]})
然后像这样使用
<button onClick={() => toggle(i)} key={i}>
{element.question}
</button>
{isOpen[i] && <p key={i}>{element.answer}</p>}