React.js中如何在单选按钮onChange事件中恢复旧值

问题出在单选按钮的默认行为逻辑：当你点击单选按钮时，浏览器会立刻切换它的选中状态，之后才触发 onChange 事件。这时候即使你在弹窗里选择“否”，DOM已经完成了状态切换，所以旧值没法保留。

要解决这个问题，核心是提前拦截默认选中行为，根据用户的确认结果手动控制选中状态，具体实现如下：

原生JavaScript实现 #

<input type="radio" name="option" value="opt1" checked> 选项1
<input type="radio" name="option" value="opt2"> 选项2
<input type="radio" name="option" value="opt3"> 选项3

<script>
// 记录当前选中的单选按钮
let currentChecked = document.querySelector('input[name="option"]:checked');
const radios = document.querySelectorAll('input[name="option"]');

radios.forEach(radio => {
  radio.addEventListener('click', (e) => {
    // 点击已选中的选项，直接跳过
    if (radio === currentChecked) return;
    
    // 阻止浏览器默认的选中行为
    e.preventDefault();
    
    const confirmResult = confirm('确认要更改选项吗？');
    if (confirmResult) {
      // 用户确认，手动设置新选项为选中
      radio.checked = true;
      currentChecked = radio;
    } else {
      // 用户取消，确保原选项保持选中（可选，因为阻止默认后原状态已保留）
      currentChecked.checked = true;
    }
  });
});
</script>

关键细节 #

• 用 click 事件替代 onChange：onChange 是状态变更后触发，而 click 事件更早，能及时拦截默认行为
• 记录当前选中项：避免重复弹出确认框（比如用户点击已经选中的选项时无需确认）
• 手动控制选中状态：只有用户确认后，才修改DOM的选中状态

React框架实现 #

如果是在React项目中，借助状态管理可以更简洁地处理：

import { useState } from 'react';

function RadioGroup() {
  // 用state管理选中状态
  const [selected, setSelected] = useState('opt1');

  const handleRadioClick = (e, newVal) => {
    if (newVal === selected) return;
    
    // 阻止默认选中行为
    e.preventDefault();
    
    const confirmChange = window.confirm('确认要更改选项吗？');
    if (confirmChange) {
      // 确认后更新状态，组件自动渲染原选中状态或新状态
      setSelected(newVal);
    }
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          name="option"
          value="opt1"
          checked={selected === 'opt1'}
          onClick={(e) => handleRadioClick(e, 'opt1')}
        />
        选项1
      </label>
      <label>
        <input
          type="radio"
          name="option"
          value="opt2"
          checked={selected === 'opt2'}
          onClick={(e) => handleRadioClick(e, 'opt2')}
        />
        选项2
      </label>
    </div>
  );
}

export default RadioGroup;

React实现说明 #

• 完全通过React状态控制选中状态，不依赖DOM的默认行为
• 阻止默认行为后，只有用户确认才更新state，组件渲染时会自动保持原选中状态

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