React中如何实现单选按钮选中时对应radio-wrapper容器样式变更

实现思路 #

通过React状态跟踪选中的单选框ID，给对应父容器动态添加激活样式类，配合CSS完成视觉效果。

完整代码示例 #

组件代码

import { useState } from 'react';

export default function RadioGroup() {
  // 初始化选中状态，默认无选中项
  const [selectedId, setSelectedId] = useState('');

  const handleRadioChange = (e) => {
    setSelectedId(e.target.id);
  };

  return (
    <div className="radioButtonImage">
      <div className={`radio-wrapper ${selectedId === 'Infant' ? 'active' : ''}`}>
        <input 
          type="radio" 
          id="Infant" 
          name="age-group" // 单选框需设置相同name实现互斥选择
          onChange={handleRadioChange}
          checked={selectedId === 'Infant'}
        />
        <img src="datarimage/png;" height="25" width="25" alt="Infant icon" /> 
        <label htmlFor="Infant" className="input-label">Infant</label>
      </div>
      <div className={`radio-wrapper ${selectedId === 'Child' ? 'active' : ''}`}>
        <input 
          type="radio" 
          id="Child" 
          name="age-group"
          onChange={handleRadioChange}
          checked={selectedId === 'Child'}
        />
        <img src="datarimage/png;" height="25" width="25" alt="Child icon" /> 
        <label htmlFor="Child" className="input-label">Child</label>
      </div>
    </div>
  );
}

CSS样式

.radio-wrapper {
  /* 基础样式可按需调整 */
  padding: 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.radio-wrapper.active {
  background-color: blue;
  border: 1px solid black;
}

/* 可选：选中后调整文字颜色提升可读性 */
.radio-wrapper.active .input-label {
  color: white;
}

关键注意点 #

• 单选框必须设置相同的name属性，才能实现互斥选择
• 用checked属性绑定状态，确保组件为受控组件
• 通过模板字符串动态拼接类名，实现选中时的样式切换

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