react如何不让单选框勾选

禁用单选框的方法

在React中阻止单选框被勾选可以通过多种方式实现，核心思路是控制checked属性与onChange事件的交互逻辑。

使用受控组件

通过将单选框的checked属性绑定到状态变量，并在onChange事件中阻止状态更新：

const [checkedValue, setCheckedValue] = useState(null);

const handleChange = (e) => {
  // 不更新状态即可阻止选中
  // setCheckedValue(e.target.value); // 注释掉这行以禁用
};

return (
  <input 
    type="radio" 
    checked={checkedValue === "option1"} 
    onChange={handleChange} 
    value="option1" 
  />
);

直接设置disabled属性

最简单的禁用方法是使用HTML原生属性：

<input type="radio" disabled />

条件性阻止事件

通过事件对象阻止默认行为和冒泡：

const handleChange = (e) => {
  e.preventDefault();
  e.stopPropagation();
};

样式处理建议

禁用状态下通常需要视觉提示：

input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

注意事项

• 受控组件方式需要配合状态管理，适用于需要动态控制禁用状态的场景
• disabled属性会完全禁用交互，包括表单提交时不会包含该字段值
• 事件阻止方法可能影响父组件的事件监听，需谨慎使用