如何用React+styled-components实现可点击自定义单选按钮

原有方案失效原因 #

• 给原生radio设置display: none会让元素完全脱离渲染树，无法响应点击事件，也无法通过CSS关联触发外层样式变化
• 外层使用div容器没有和原生input做关联，点击容器和内部文本无法触发radio的选中状态

核心实现逻辑 #

• 用<label>作为单选按钮外层容器，通过标签原生关联特性，点击整个容器区域即可触发内部radio选中，不需要额外绑定点击事件
• 原生radio采用视觉隐藏方案处理：保留元素交互能力、表单关联能力、键盘无障碍访问能力，仅在视觉上不可见
• 两种方式实现选中态样式匹配：
  • 现代浏览器用CSS :has()选择器，直接匹配内部radio的:checked状态触发外层样式
  • 兼容旧浏览器时，直接通过styled-components的props传入选中状态，动态控制样式
• 同组radio设置相同name属性，保证单选互斥逻辑正常

完整可运行代码 #

import { useState } from 'react';
import styled from 'styled-components';

// 视觉隐藏原生单选框，保留所有原生交互能力
const HiddenRadioInput = styled.input.attrs({ type: 'radio' })`
  position: absolute;
  opacity: 0;
  pointer-events: none;
`;

// 自定义单选按钮容器
const CustomRadioBox = styled.label`
  position: relative;
  width: 60px;
  height: 60px;
  border: 1px solid #333;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 10px;
  font-size: 16px;
  transition: all 0.2s ease;

  /* 选中态样式：内部radio选中时自动触发，适配现代浏览器 */
  &:has(input:checked) {
    border-color: #165dff;
    background-color: #165dff;
    color: #fff;
  }
`;

export default function SizeRadioGroup() {
  const [currentSize, setCurrentSize] = useState('XS');
  const sizeList = ['XS', 'S', 'M', 'L', 'XL'];

  return (
    <div className="radio-group">
      {sizeList.map(size => (
        <CustomRadioBox key={size}>
          <HiddenRadioInput
            name="clothes-size"
            value={size}
            checked={currentSize === size}
            onChange={(e) => setCurrentSize(e.target.value)}
          />
          {size}
        </CustomRadioBox>
      ))}
    </div>
  );
}

旧浏览器兼容方案 #

如果需要兼容不支持:has()选择器的浏览器版本，直接通过props控制选中态样式即可，不需要依赖CSS选择器：

// 修改CustomRadioBox的样式定义，通过props动态赋值
const CustomRadioBox = styled.label`
  position: relative;
  width: 60px;
  height: 60px;
  border: 1px solid ${props => props.checked ? '#165dff' : '#333'};
  background-color: ${props => props.checked ? '#165dff' : '#fff'};
  color: ${props => props.checked ? '#fff' : '#333'};
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 10px;
  font-size: 16px;
  transition: all 0.2s ease;
`;

// 使用组件时传入checked参数
{sizeList.map(size => (
  <CustomRadioBox key={size} checked={currentSize === size}>
    <HiddenRadioInput
      name="clothes-size"
      value={size}
      checked={currentSize === size}
      onChange={(e) => setCurrentSize(e.target.value)}
    />
    {size}
  </CustomRadioBox>
))}

实现注意事项 #

• 禁止用display: none或visibility: hidden隐藏原生radio：前者会完全丢失交互能力，后者会占用布局空间，代码中使用的绝对定位+透明度为0的方案是无障碍访问的最佳实践，支持键盘Tab切换、空格选中的原生交互
• 同组radio必须设置相同的name属性，否则会丢失单选互斥能力
• 不需要额外给外层容器绑定点击事件，label标签原生就可以关联内部表单元素，额外绑定事件反而可能导致重复触发问题

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