React：使用单个函数处理多个单选切换按钮（input type radio）

嘿，我帮你搞定用单个函数处理多个React单选切换按钮的需求，结合你写的ToggleIconSwitch组件来调整完善~

第一步：补全你的ToggleIconSwitch组件 #

你原来的代码没写完右侧图标对应的单选按钮，我帮你补全，同时调整props命名让逻辑更清晰：

import React, { Component } from 'react';

class ToggleIconSwitch extends Component {
  render() {
    const { 
      leftIcon, 
      rightIcon, 
      name, 
      handleOptionChange, 
      checkedValue, 
      leftValue, 
      rightValue 
    } = this.props;

    return (
      <div className="toggle-switch-icon-wrapper">
        <div className="toggle-switch">
          {/* 左侧单选按钮 */}
          <input
            type="radio"
            name={name}
            id={leftValue}
            value={leftValue}
            checked={checkedValue === leftValue}
            onChange={handleOptionChange}
          />
          <label htmlFor={leftValue} className="icon">
            {leftIcon}
          </label>

          {/* 右侧单选按钮 */}
          <input
            type="radio"
            name={name}
            id={rightValue}
            value={rightValue}
            checked={checkedValue === rightValue}
            onChange={handleOptionChange}
          />
          <label htmlFor={rightValue} className="icon">
            {rightIcon}
          </label>
        </div>
      </div>
    );
  }
}

export default ToggleIconSwitch;

第二步：父组件中用单个函数处理所有切换 #

在父组件里管理不同分组的单选状态，编写一个通用的handleOptionChange函数，利用原生单选按钮的name属性来区分不同分组：

import React, { Component } from 'react';
import ToggleIconSwitch from './ToggleIconSwitch';
// 替换成你自己的图标组件
import SunIcon from './icons/SunIcon';
import MoonIcon from './icons/MoonIcon';
import CameraIcon from './icons/CameraIcon';
import GalleryIcon from './icons/GalleryIcon';

class ParentComponent extends Component {
  // 初始化不同分组的选中状态
  state = {
    themeOption: 'light',
    mediaOption: 'camera'
  };

  // 单个通用处理函数，搞定所有单选切换
  handleOptionChange = (e) => {
    const { name, value } = e.target;
    // 用计算属性名，根据input的name动态更新对应的state字段
    this.setState({
      [name]: value
    });
  };

  render() {
    const { themeOption, mediaOption } = this.state;

    return (
      <div className="app-container">
        {/* 主题切换组 */}
        <div className="toggle-group">
          <h3>选择主题</h3>
          <ToggleIconSwitch
            name="themeOption" // 和state里的字段名对应
            leftIcon={<SunIcon />}
            rightIcon={<MoonIcon />}
            leftValue="light"
            rightValue="dark"
            checkedValue={themeOption}
            handleOptionChange={this.handleOptionChange}
          />
        </div>

        {/* 媒体来源切换组 */}
        <div className="toggle-group">
          <h3>选择媒体来源</h3>
          <ToggleIconSwitch
            name="mediaOption" // 和state里的字段名对应
            leftIcon={<CameraIcon />}
            rightIcon={<GalleryIcon />}
            leftValue="camera"
            rightValue="gallery"
            checkedValue={mediaOption}
            handleOptionChange={this.handleOptionChange}
          />
        </div>
      </div>
    );
  }
}

export default ParentComponent;

关键逻辑说明 #

• 单选按钮的name属性是核心：同一组的单选按钮必须共享相同的name，浏览器会自动保证同一组只能选中一个，我们只需要在组件里统一传入这个name即可。
• 通用处理函数的技巧：利用事件对象的name和value，通过计算属性名[name]来动态更新state，这样不管有多少组单选按钮，这一个函数就能搞定所有切换。
• 选中状态的判断：子组件通过checkedValue props接收父组件的当前选中值，对比单选按钮的value来决定是否选中。

可选：添加样式美化 #

隐藏原生单选按钮，给选中的图标加高亮样式：

.toggle-switch-icon-wrapper {
  margin: 1.5rem 0;
}

.toggle-switch {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* 隐藏原生单选按钮 */
.toggle-switch input[type="radio"] {
  display: none;
}

.toggle-switch .icon {
  padding: 0.6rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.2rem;
}

/* 选中状态的高亮样式 */
.toggle-switch input[type="radio"]:checked + .icon {
  background-color: #2196f3;
  color: #fff;
  border-color: #2196f3;
}

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