React+Bootstrap分页组件切换页面后复选框选中状态丢失问题

问题根源：组件卸载导致DOM状态清零 #

切换到第1页时，第0页的测试题组件会被React从DOM中彻底移除（也就是组件卸载），对应的复选框DOM元素直接销毁——HTML本身不会帮你保存已消失元素的状态，毕竟这些元素已经不在页面里了。等你切回第0页，React会重新渲染这一页的所有组件，复选框会回到初始的未选中状态，之前的勾选记录自然就没了。

必须手动维护复选框状态 #

没错，你得自己处理复选框的选中状态，不能指望DOM自动保存。React是单向数据流，组件的状态得靠React的state或者外部状态管理工具（比如Context、Redux）来维护，和DOM原生状态没关系。

给你几个具体的实现思路：

• 在父组件（或者全局状态里）存一个对象，用来记录所有测试题的选中情况，比如selectedAnswers: { 题ID: 'yes'/'no' }
• 每个复选框的checked属性绑定到这个对象里对应的值，举个例子：

  <input 
    type="checkbox" 
    checked={selectedAnswers[question.id] === 'yes'}
    onChange={() => updateAnswer(question.id, 'yes')}
  />
  

• 切换分页时只改变当前页码，全局的选中状态一直保留，这样切回原页时，复选框会根据状态渲染出正确的选中状态。

为啥HTML没法保存这些状态？ #

HTML表单元素的状态（比如复选框是否选中）是和当前存在的DOM元素绑定的。一旦元素被从DOM树里删掉（比如分页卸载组件），这个元素就没了，它的状态也就跟着消失了。React重新渲染时会创建全新的DOM元素，这些新元素只会根据你给的props/state初始化，不会去“找回”之前被销毁元素的状态。

内容的提问来源于stack exchange，提问作者Joe