React中如何结合单选框与复选框实现特殊调研选项逻辑？

嘿，这个需求其实是要实现一个混合选择逻辑：允许多选a-d，但e是个「排他性选项」——选了e就不能选其他，选了其他也不能选e。在React里我们可以通过状态管理来搞定这个交互，下面给你拆解思路和代码：

1. 状态设计：需要两个核心状态，一个存储a-d的选中项（数组类型），另一个标记e选项是否被选中（布尔值）。
2. 交互联动：
   • 点击a-d选项时：如果e已被选中，直接拦截操作；否则切换该选项的选中状态（添加/移除）。
   • 点击e选项时：如果是未选中状态，立刻清空a-d的选中项并标记e为选中；如果是已选中状态，取消标记即可。
   • 渲染控制：根据e的选中状态禁用a-d选项，根据a-d的选中状态禁用e选项，同时给选中的按钮添加对应样式。

结合你提供的自定义Button组件片段，我整理了完整的实现代码：

import { useState } from 'react';

// 基于你提供的片段封装的自定义按钮组件
const SurvButton = ({ key, id, className, color, onClick, disabled, isSelected }) => {
  // 拼接选中状态的样式类
  const buttonClass = `${className} survChkBtn ${isSelected ? 'selected-btn' : ''}`;
  return (
    <button
      key={key}
      id={id}
      className={buttonClass}
      style={{ backgroundColor: color }}
      onClick={onClick}
      disabled={disabled}
    >
      {id}
    </button>
  );
};

const MixedSurveyQuestion = () => {
  // 管理a-d的选中项
  const [selectedADOptions, setSelectedADOptions] = useState([]);
  // 管理e选项的选中状态
  const [isEOptionChecked, setIsEOptionChecked] = useState(false);

  // 处理a-d选项的点击事件
  const handleADOptionClick = (option) => {
    if (isEOptionChecked) return; // e已选中时，禁止操作a-d

    setSelectedADOptions(prev => {
      return prev.includes(option)
        ? prev.filter(opt => opt !== option) // 移除已选中项
        : [...prev, option]; // 添加新选中项
    });
  };

  // 处理e选项的点击事件
  const handleEOptionClick = () => {
    setIsEOptionChecked(prev => {
      // 如果是从未选中切换到选中，清空a-d的选择
      if (!prev) setSelectedADOptions([]);
      return !prev;
    });
  };

  // 选项配置（可以根据实际需求扩展）
  const adOptions = ['a', 'b', 'c', 'd'];
  const buttonStyles = ['btn-style-1', 'btn-style-2', 'btn-style-3', 'btn-style-4'];
  const buttonColors = ['#f0f0f0', '#e8f4f8', '#f8e8e8', '#f0f8e8'];

  return (
    <div className="survey-item">
      <h4>请选择合适的选项：</h4>
      {/* 渲染a-d选项组 */}
      <div className="ad-option-group">
        {adOptions.map((option, index) => (
          <SurvButton
            key={option}
            id={option}
            className={buttonStyles[index]}
            color={buttonColors[index]}
            onClick={() => handleADOptionClick(option)}
            disabled={isEOptionChecked}
            isSelected={selectedADOptions.includes(option)}
          />
        ))}
      </div>
      {/* 渲染e选项 */}
      <div className="e-option-group">
        <SurvButton
          key="e"
          id="e"
          className="btn-style-e"
          color="#ffebee"
          onClick={handleEOptionClick}
          disabled={selectedADOptions.length > 0}
          isSelected={isEOptionChecked}
        />
      </div>
    </div>
  );
};

export default MixedSurveyQuestion;

• 状态联动：当e被选中时，a-d的按钮会自动禁用并清空选中状态；当a-d有选中项时，e按钮会被禁用，彻底避免冲突选择。
• 样式适配：通过isSelected属性给按钮传递选中状态，你可以在自定义Button里根据这个属性添加高亮、边框变色等样式，和你原有代码的样式逻辑完全兼容。
• 扩展性：如果需要支持「取消e选项后恢复之前a-d的选择」，可以额外加一个prevADOptions状态，在选中e时保存当前的selectedADOptions，取消e时恢复即可。

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