提问人：Rafael Polonio 提问时间：2/28/2023 更新时间：2/28/2023 访问量：33
React Semantic UI Radio 检查值消失
React Semantic UI Radio check value disappearing
问：
我有一个问题列表，在每个问题中，我都有无线电选择，我可以选择“单选”或“多选”值
问题是，如果我为不同的问题选择相同的值，例如单选，则检查仅出现在其中一个问题中
下面的打印屏幕（在这种情况下，两者都选择单选）：
如果我有一个多选和一个单选，它运行良好，检查在正确的位置
法典：
<SetUpContainer marginTop>
<SegmentTitle>
Multiple choice options
</SegmentTitle>
<Radio
value={question.type}
name="Single Select"
label="Single select - participants can select one option"
checked={question.type === 'single_select'}
onClick={() => handleSelectionTypeChange(indexQuestion, 'single_select')}
/>
<Radio
value={question.type}
name="Multiple Select"
label="Multiple select - participants can select one or more options"
checked={question.type === 'multiple_select'}
onClick={() => handleSelectionTypeChange(indexQuestion, 'multiple_select')}
/>
</SetUpContainer>
有谁知道为什么会这样？
答：
1赞
haptn
2/28/2023
#1
在这种情况下，您有一个问题列表，因此您还需要为每个 Radio 指定一个唯一的名称或其他任何名称来区分这些单选按钮，否则，只会检查最后一个匹配项。
我有一些想法来处理这个问题。我还没有测试，只是起草这个想法。
解决方案 1：
{questions?.map(question => (
/* ... */
<SetUpContainer marginTop>
<SegmentTitle>
Multiple choice options
</SegmentTitle>
<Radio
value={question.type}
name={`Single Select-Q${question.no}`}
label="Single select - participants can select one option"
checked={question.type === 'single_select'}
onClick={() => handleSelectionTypeChange(indexQuestion, 'single_select')}
/>
<Radio
value={question.type}
name={`Multiple Select-Q${question.no}`}
label="Multiple select - participants can select one or more options"
checked={question.type === 'multiple_select'}
onClick={() => handleSelectionTypeChange(indexQuestion, 'multiple_select')}
/>
</SetUpContainer>
/* ... */
}
解决方案 2：
const [listOptions, setListOptions] = useState({
// 'Q1': 'single_select', // just an example
// 'Q2': 'multiple_select', // just an example
})
return (
{questions?.map(question => (
/* ... */
<SetUpContainer marginTop>
<SegmentTitle>
Multiple choice options
</SegmentTitle>
<Radio
value={question.type}
name="Single Select"
label="Single select - participants can select one option"
checked={listOptions[question.no] === 'single_select'}
onClick={() => handleSelectionTypeChange(indexQuestion, 'single_select')}
/>
<Radio
value={question.type}
name="Multiple Select"
label="Multiple select - participants can select one or more options"
checked={listOptions[question.no] === 'multiple_select'}
onClick={() => handleSelectionTypeChange(indexQuestion, 'multiple_select')}
/>
</SetUpContainer>
/* ... */
}
)
评论