我正在使用 reactJS。
我有一個組件AnswerButtons，它是一組切換按鈕，例如：
const [value, setValue] = useState([]);
const answers = [
{ point: 1, text: 'Answer one' },
{ point: .25, text: 'Answer two' },
{ point: .1, text: 'Answer three' },
{ point: 0, text: 'Answer four' },
]
const handleClick = (e) => { //This function simply enables toggling only one button at same time
if (e.length === 0)
setValue([])
else if (e.length === 1) {
setValue(e);
} else {
if (e[0] === value[0])
setValue([e[1]])
else
setValue([e[0]])
}
}
//This renders a group of 4 toggle button, 'question' is given by props
<h2>{question}</h2>
<ToggleButtonGroup type="checkbox" value={value} onChange={handleClick}>
{answers.map((element, idx) =>
<ToggleButton key={idx} id={idx} value={idx}>
{element.text}
</ToggleButton>)}
</ToggleButtonGroup>
因此，我正在呼叫該組件來呈現測驗：
const questions = [] //list of questions
<div>
{questions.map((q, idx) =>
<AnswerButtons key={idx} question={q.text}} />)}
</div>
所以我的問題是，每當我切換一個問題的按鈕時，它只會影響第一個呈現的問題。
有沒有人知道我該如何解決這個問題？
uj5u.com熱心網友回復：
問題是來自id。
<ToggleButton
size="sm"
key={idx}
variant="outline-success"
id={idx question}
value={idx}
>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/400361.html
標籤：反应