React中实现Select组件单选/多选切换及复选框嵌入问题

需求：

• 选择「会诊」选项时，「流程（Procedimentos）」为单选
• 选择「实验室检测（Exames Laboratoriais）」选项时，「流程」为多选

当前代码使用原生<select multiple>实现多选逻辑，但原生<select multiple>不会在选项前显示复选框，这是浏览器默认样式的限制，仅能通过Ctrl/Command键多选，用户操作不直观。

解决方案 #

方案1：使用第三方UI库（推荐） #

借助成熟的React UI组件库（如Ant Design、Material UI），它们的下拉多选组件自带复选框样式，且逻辑封装完善。

以Ant Design的Select组件为例：

import { Select } from 'antd';
const { Option } = Select;

// 组件内代码
<div className="formulario-campo2">
  <label htmlFor="procedimentos">Procedimentos*</label>
  <Select
    className="campos"
    id="procedimentos"
    value={procedimentos}
    onChange={(value) => {
      // 根据Tipo de Solicitação处理单选/多选值
      if (tipoSolicitacao === "Exames Laboratoriais") {
        setProcedimentos(value); // 多选时value是数组
      } else {
        setProcedimentos([value]); // 单选时转成数组统一格式
      }
    }}
    mode={tipoSolicitacao === "Exames Laboratoriais" ? "multiple" : undefined}
    placeholder="Selecione um procedimento"
  >
    {procedimentosFiltrados.map((procedimento) => (
      <Option key={procedimento.id} value={procedimento.descricao}>
        {procedimento.descricao}
      </Option>
    ))}
  </Select>
</div>

• 当mode="multiple"时，组件自动显示复选框，无需额外样式
• 单选模式下保持默认下拉选择逻辑，与需求匹配

方案2：自定义带复选框的下拉组件 #

如果不想引入第三方库，可以手动实现一个下拉面板，用<input type="checkbox">渲染选项：

import { useState } from 'react';

// 组件内新增state控制下拉展开
const [isDropdownOpen, setIsDropdownOpen] = useState(false);

// 处理选项选择逻辑
const handleOptionSelect = (optionValue) => {
  if (tipoSolicitacao === "Exames Laboratoriais") {
    // 多选：切换选项选中状态
    setProcedimentos(prev => 
      prev.includes(optionValue)
        ? prev.filter(val => val !== optionValue)
        : [...prev, optionValue]
    );
  } else {
    // 单选：直接替换选中值
    setProcedimentos([optionValue]);
    setIsDropdownOpen(false); // 选中后关闭下拉
  }
};

// 渲染部分
<div className="formulario-campo2">
  <label htmlFor="procedimentos">Procedimentos*</label>
  {/* 模拟下拉触发框 */}
  <div 
    className="custom-select-trigger"
    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
  >
    {procedimentos.length > 0 
      ? procedimentos.join(', ') 
      : "Selecione um procedimento"}
  </div>
  {/* 下拉面板 */}
  {isDropdownOpen && (
    <div className="custom-dropdown-panel">
      {procedimentosFiltrados.map((procedimento) => (
        <div key={procedimento.id} className="dropdown-option">
          <input
            type="checkbox"
            checked={procedimentos.includes(procedimento.descricao)}
            onChange={() => handleOptionSelect(procedimento.descricao)}
            disabled={tipoSolicitacao !== "Exames Laboratoriais" && procedimentos.length > 0 && procedimentos[0] !== procedimento.descricao}
          />
          <span>{procedimento.descricao}</span>
        </div>
      ))}
    </div>
  )}
</div>

需要补充对应的CSS样式来模拟下拉框的外观，比如：

.custom-select-trigger {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.custom-dropdown-panel {
  position: absolute;
  border: 1px solid #ccc;
  border-top: none;
  background: white;
  max-height: 200px;
  overflow-y: auto;
}
.dropdown-option {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-option:hover {
  background: #f5f5f5;
}

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