本文详解如何利用受控组件原理，通过绑定 checked 属性与状态联动，实现单选按钮随当前题目切换自动重置选中状态，无需强制重渲染或手动清空 DOM。
本文详解如何利用受控组件原理，通过绑定 `checked` 属性与状态联动，实现单选按钮随当前题目切换自动重置选中状态，无需强制重渲染或手动清空 dom。
在 React 中，单选按钮（）不应依赖 DOM 操作或强制重渲染来“清除选中”，而应始终作为受控组件——即其 checked 状态完全由 React 状态驱动。当题目切换时，只要确保当前题目的答案状态为 undefined 或初始值，对应 radio 的 checked={answer === option} 自然为 false，所有选项即自动取消选中。
✅ 正确做法：用状态控制 checked，而非重渲染
核心逻辑在于：
- 每道题的选中状态单独存储（如 answers[questionText] 或 answers[currentIndex]）；
- 每个 radio 的 checked 属性严格等于 当前题目的已存答案 === 当前选项值；
- 切换题目时，因 answers[currentQuestion] 未设置（即 undefined），所有 checked 计算结果为 false，视觉上自动“重置”。
以下是你原代码的优化重构示例（精简关键逻辑）：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
// 假设 questions 是已加载的题目数组
const [count, setCount] = useState(0);
const [answers, setAnswers] = useState<record string>>({}); // key: 题号索引，value: 选中选项值
const currentQuestion = questions[count];
const currentAnswer = answers[count]; // 获取本题当前答案（可能为 undefined）
const handleRadioChange = (e: React.ChangeEvent<htmlinputelement>) => {
setAnswers(prev => ({
...prev,
[count]: e.target.value // 仅更新当前题的答案
}));
};
return (
<section><h2>{currentQuestion.question}</h2>
<ul>
{currentQuestion.answers[0]?.a && (
<li classname="pb-3">
<label>
<input type="radio" name="{`q-${count}`}" value="a" checked onchange="{handleRadioChange}">
{' a) '} {currentQuestion.answers[0].a}
</label>
</li>
)}
{/* 同理处理 b/c/d... */}
<li classname="pb-3">
<label>
<input type="radio" name="{`q-${count}`}" value="b" checked onchange="{handleRadioChange}">
{' b) '} {currentQuestion.answers[0].b}
</label>
</li>
<li classname="pb-3">
<label>
<input type="radio" name="{`q-${count}`}" value="c" checked onchange="{handleRadioChange}">
{' c) '} {currentQuestion.answers[0].c}
</label>
</li>
<li classname="pb-3">
<label>
<input type="radio" name="{`q-${count}`}" value="d" checked onchange="{handleRadioChange}">
{' d) '} {currentQuestion.answers[0].d}
</label>
</li>
</ul></section>
);</htmlinputelement></record>
⚠️ 关键注意事项
- name 属性必须唯一 per question：使用 name={q-${count}} 而非固定 "answer"，否则不同题目的 radio 会相互干扰（浏览器原生单选组行为）。
- 不要用 key 强制重渲染：如 是反模式——它会销毁并重建 DOM，丢失输入焦点、动画等体验，且违背受控组件设计原则。
- useEffect 并非必需：你无需监听 count 变化去“重置”表单；只要 checked 绑定正确，状态更新后 React 自动同步 UI。
- 初始化 answers 为对象而非空对象 {} 即可：未设置的 answers[count] 返回 undefined，undefined === "a" 为 false，天然满足“未作答时无默认选中”。
✅ 总结
重置单选按钮的本质不是“让 DOM 重新画一遍”，而是确保其 checked 属性在新上下文中计算为 false。通过将每个 radio 的 checked 映射到精确对应的题目答案状态，并配合唯一 name，即可零成本实现题目切换时的自动清空。这既是 React 受控组件的最佳实践，也保障了可预测性、可测试性与无障碍访问支持（如屏幕阅读器能准确识别当前选中状态）。
最终效果：点击「Next」切换题目 → 当前题答案状态未初始化 → 所有 radio 的 checked 为 false → 视觉上全部未选中 → 用户可重新作答。简洁、高效、符合 React 数据流哲学。
