如何创建外观正常但不可选中却能触发onClick的单选按钮？

下面提供几个适配React场景的实现方式，满足「外观正常、无法选中、可触发点击事件」的需求：

方法一：阻止默认行为 + 强制控制选中状态 #

核心思路是拦截单选按钮的默认选中行为，同时强制将checked设为false，既保留原生启用状态外观，又避免被选中，还能正常触发点击逻辑。

import React from 'react';

const NonSelectableRadio = () => {
  const handleRadioClick = (e) => {
    // 阻止浏览器默认的选中操作，避免按钮临时选中的闪烁问题
    e.preventDefault();
    // 执行你的自定义业务逻辑
    console.log("单选按钮被点击");
  };

  return (
    <div>
      <input
        type="radio"
        name="radio-group" {/* 保持同组属性，维持原生视觉关联 */}
        checked={false} {/* 强制始终未选中 */}
        onClick={handleRadioClick}
      />
      <input
        type="radio"
        name="radio-group"
        checked={false}
        onClick={handleRadioClick}
      />
      <input
        type="radio"
        name="radio-group"
        checked={false}
        onClick={handleRadioClick}
      />
    </div>
  );
};

export default NonSelectableRadio;

方法二：使用readOnly属性（需注意兼容性） #

部分现代浏览器支持给单选按钮设置readOnly属性，该属性会让按钮保持启用状态外观，无法被选中，但依然能响应点击事件。不过此属性并非所有浏览器都完全兼容，建议先做兼容性测试：

<input
  type="radio"
  name="radio-group"
  readOnly
  onClick={() => console.log("点击触发逻辑")}
/>

方法三：自定义外观模拟原生单选按钮 #

如果原生控件的限制无法满足需求，可以用label配合隐藏的input，完全自定义外观和交互逻辑，彻底摆脱原生控件的约束：

import React from 'react';
import './CustomRadio.css';

const CustomNonSelectableRadio = () => {
  const handleClick = () => {
    console.log("自定义单选按钮被点击");
  };

  return (
    <div>
      <label className="custom-radio-wrapper" onClick={handleClick}>
        <input type="radio" hidden />
        <span className="radio-icon"></span>
      </label>
      <label className="custom-radio-wrapper" onClick={handleClick}>
        <input type="radio" hidden />
        <span className="radio-icon"></span>
      </label>
    </div>
  );
};

export default CustomNonSelectableRadio;

对应的CustomRadio.css样式：

.custom-radio-wrapper {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-right: 18px;
}

.radio-icon {
  width: 18px;
  height: 18px;
  border: 2px solid #0d6efd;
  border-radius: 50%;
  position: relative;
  /* 禁用选中后的内部圆点样式 */
}

.custom-radio-wrapper input[type="radio"]:checked + .radio-icon::after {
  display: none;
}

内容的提问来源于stack exchange，提问作者Mark C.