如何在React中监听单选按钮组点击并切换label的check类？

需求说明 #

需要实现一个单选系统，用户一次只能选中一个颜色选项。点击对应颜色的label时，给该label添加check类；切换选择其他颜色时，移除原选中项的check类并添加到新选中项上。由于是React项目，不能使用原生JS的DOM查询和事件绑定方式，现有原生JS实现示例和React代码片段，寻求合适的React解决方案。

解决方案 #

在React中，我们通过状态管理来控制UI变化，核心思路是用状态存储当前选中的颜色，动态控制label的类名。具体实现步骤如下：

1. 用useState钩子创建状态变量，存储当前选中的颜色值（初始化设为默认选中的'Red'）
2. 给每个radio输入框绑定onChange事件，触发时更新状态
3. 动态判断每个label是否对应当前选中的颜色，决定是否添加check类

修改后的完整代码 #

const ShowProduct = () => {
  // 初始化选中状态为'Red'，对应默认选中项
  const [selectedColor, setSelectedColor] = React.useState('Red');

  // 处理颜色选择变化
  const handleColorChange = (e) => {
    setSelectedColor(e.target.value);
  };

  return(
    <div className='product-details'>
      {/* Black选项 */}
      <input 
        type="radio" 
        name="color" 
        value="Black" 
        hidden 
        id="black-color"
        checked={selectedColor === 'Black'}
        onChange={handleColorChange}
      />
      <label 
        htmlFor="black-color" 
        className={`color-radio-btn ${selectedColor === 'Black' ? 'check' : ''}`}
      >Black</label>

      {/* Red选项 */}
      <input 
        type="radio" 
        name="color" 
        value="Red" 
        hidden 
        id="red-color"
        checked={selectedColor === 'Red'}
        onChange={handleColorChange}
      />
      <label 
        htmlFor="red-color" 
        className={`color-radio-btn ${selectedColor === 'Red' ? 'check' : ''}`}
      >Red</label>

      {/* White选项 */}
      <input 
        type="radio" 
        name="color" 
        value="White" 
        hidden 
        id="white-color"
        checked={selectedColor === 'White'}
        onChange={handleColorChange}
      />
      <label 
        htmlFor="white-color" 
        className={`color-radio-btn ${selectedColor === 'White' ? 'check' : ''}`}
      >White</label>

      {/* Yellow选项 */}
      <input 
        type="radio" 
        name="color" 
        value="Yellow" 
        hidden 
        id="yellow-color"
        checked={selectedColor === 'Yellow'}
        onChange={handleColorChange}
      />
      <label 
        htmlFor="yellow-color" 
        className={`color-radio-btn ${selectedColor === 'Yellow' ? 'check' : ''}`}
      >Yellow</label>

      {/* Green选项 */}
      <input 
        type="radio" 
        name="color" 
        value="Green" 
        hidden 
        id="green-color"
        checked={selectedColor === 'Green'}
        onChange={handleColorChange}
      />
      <label 
        htmlFor="green-color" 
        className={`color-radio-btn ${selectedColor === 'Green' ? 'check' : ''}`}
      >Green</label>

      {/* Purple选项 */}
      <input 
        type="radio" 
        name="color" 
        value="Purple" 
        hidden 
        id="purple-color"
        checked={selectedColor === 'Purple'}
        onChange={handleColorChange}
      />
      <label 
        htmlFor="purple-color" 
        className={`color-radio-btn ${selectedColor === 'Purple' ? 'check' : ''}`}
      >Purple</label>

      {/* Blue选项 - 修正原代码value错误（原写为Purple）*/}
      <input 
        type="radio" 
        name="color" 
        value="Blue" 
        hidden 
        id="blue-color"
        checked={selectedColor === 'Blue'}
        onChange={handleColorChange}
      />
      <label 
        htmlFor="blue-color" 
        className={`color-radio-btn ${selectedColor === 'Blue' ? 'check' : ''}`}
      >Blue</label>

      {/* Orange选项 - 修正原代码value错误（原写为Purple）*/}
      <input 
        type="radio" 
        name="color" 
        value="Orange" 
        hidden 
        id="orange-color"
        checked={selectedColor === 'Orange'}
        onChange={handleColorChange}
      />
      <label 
        htmlFor="orange-color" 
        className={`color-radio-btn ${selectedColor === 'Orange' ? 'check' : ''}`}
      >Orange</label>

      {/* Custom选项 */}
      <input 
        type="radio" 
        name="color" 
        value="Custom" 
        hidden 
        id="custom-color"
        checked={selectedColor === 'Custom'}
        onChange={handleColorChange}
      />
      <label 
        htmlFor="custom-color" 
        className={`color-radio-btn ${selectedColor === 'Custom' ? 'check' : ''}`}
      >Custom</label>

      {/* 1-Color选项 */}
      <input 
        type="radio" 
        name="color" 
        value="NotCustom" 
        hidden 
        id="not-custom-color"
        checked={selectedColor === 'NotCustom'}
        onChange={handleColorChange}
      />
      <label 
        htmlFor="not-custom-color" 
        className={`color-radio-btn ${selectedColor === 'NotCustom' ? 'check' : ''}`}
      >1-Color</label>
    </div>
  );
}

ReactDOM.render(<ShowProduct />, document.getElementById("root"));

关键说明 #

• 修正了原代码中Blue、Orange选项的value错误（原代码误写为Purple，会导致选中逻辑失效）
• 通过checked属性绑定React状态，保证radio输入框的选中状态与状态变量同步
• 使用模板字符串动态拼接类名：当selectedColor与当前label对应的颜色值匹配时，自动添加check类
• 所有radio共享name="color"属性，结合原生单选机制和React状态管理，实现完整的单选交互

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