React分页中单选按钮跨页复用选中状态问题排查

问题原因 #

浏览器会自动保留表单控件的状态，即便不同页面的单选按钮name属性不同，只要value值一致，切换页面时浏览器可能自动选中对应值的单选按钮。再加上原代码未用受控组件方式管理单选状态，导致状态脱离React控制，出现非预期的自动选中行为。

解决方案 #

通过受控组件分别管理每一页的单选选中状态，确保各页面的选择状态完全独立，不受浏览器自动填充干扰：

修改后的核心代码 #

const Example = () => {
  const [page, setPage] = React.useState(1);
  // 分别存储两页的单选选中值
  const [page1Selected, setPage1Selected] = React.useState('');
  const [page2Selected, setPage2Selected] = React.useState('');

  if (page === 1) {
    return (
      <>
        <div>page1</div>
        <input 
          type="radio" 
          name="options1" 
          id="option1_1" 
          value="1"
          checked={page1Selected === '1'}
          onChange={(e) => setPage1Selected(e.target.value)}
        />
        <input 
          type="radio" 
          name="options1" 
          id="option1_2" 
          value="2"
          checked={page1Selected === '2'}
          onChange={(e) => setPage1Selected(e.target.value)}
        />
        <input 
          type="radio" 
          name="options1" 
          id="option1_3" 
          value="3"
          checked={page1Selected === '3'}
          onChange={(e) => setPage1Selected(e.target.value)}
        />
        <button onClick={() => setPage(page - 1)} disabled={page === 1}>back</button>
        <button onClick={() => setPage(page + 1)}>next</button>
      </>
    );
  } else {
    return (
      <>
        <div>page2</div>
        <input 
          type="radio" 
          name="options2" 
          id="option2_1" 
          value="1"
          checked={page2Selected === '1'}
          onChange={(e) => setPage2Selected(e.target.value)}
        />
        <input 
          type="radio" 
          name="options2" 
          id="option2_2" 
          value="2"
          checked={page2Selected === '2'}
          onChange={(e) => setPage2Selected(e.target.value)}
        />
        <input 
          type="radio" 
          name="options2" 
          id="option2_3" 
          value="3"
          checked={page2Selected === '3'}
          onChange={(e) => setPage2Selected(e.target.value)}
        />
        <input 
          type="radio" 
          name="options2" 
          id="option2_4" 
          value="4"
          checked={page2Selected === '4'}
          onChange={(e) => setPage2Selected(e.target.value)}
        />
        <button onClick={() => setPage(page - 1)}>back</button>
        <button onClick={() => setPage(page + 1)} disabled={page === 2}>next</button>
      </>
    );
  }
};

关键改动说明 #

• 新增page1Selected和page2Selected状态变量，分别存储对应页面的单选选中值
• 给每个单选按钮添加checked属性，通过状态值精确控制选中状态，完全接管浏览器的默认行为
• 添加onChange事件，在用户选择时同步更新对应页面的状态
• 给翻页按钮添加disabled属性，避免无效的页码切换（可选优化）

额外优化：统一状态管理 #

如果分页数量较多，可以用对象统一管理各页的选中状态，减少零散的状态变量：

const [selectedValues, setSelectedValues] = React.useState({
  page1: '',
  page2: ''
});

// 更新状态时使用：
setSelectedValues(prev => ({ ...prev, page1: e.target.value }));

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