有没有办法遍历按钮列表并在单击时切换特定按钮？

Question

问题 - 当我单击一个按钮显示答案文本时，另一个按钮也会打开。我只希望每个问题的答案在我点击时打开。

我的代码 -

.root {
     -fx-background-color: beige;
}

Answer 1

将您的 isOpen 设置为一个对象，然后根据需要将布尔值分配为 isOpen[index]=false|true。在 HTML 中，绑定为 isOpen[i] &&...

您在这里所做的问题是变量 isOpen 与您的 Questions 对象无关。

Answer 2

您可以将 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>}