在React中如何从枚举值的下拉框中选择多个选项？

核心思路 #

把原有的单下拉选择组件替换为复选框组，通过状态管理选中的多个枚举值，适配表单验证逻辑。

代码实现（React示例） #

首先在组件内维护选中值的状态，处理复选框的选中/取消逻辑：

import { useState } from 'react';

// 组件内部状态
const [selectedFlowerTypes, setSelectedFlowerTypes] = useState([]);

// 处理复选框切换
const toggleFlowerType = (flowerType) => {
  setSelectedFlowerTypes(prevSelected => {
    return prevSelected.includes(flowerType)
      ? prevSelected.filter(type => type !== flowerType)
      : [...prevSelected, flowerType];
  });
};

替换原有的ValidatedField下拉框代码，改为渲染复选框组：

<ValidatedField
  label="花的类型"
  id="flowers_type"
  name="flowers_type"
  data-cy="flowers_type"
  value={selectedFlowerTypes}
  // 根据需求设置验证规则，比如至少选一个：rules={{ minLength: 1 }}
>
  {flowersTypeValues.map(flowerType => (
    <div key={flowerType} style={{ margin: '8px 0' }}>
      <input
        type="checkbox"
        id={`flower-type-${flowerType}`}
        value={flowerType}
        checked={selectedFlowerTypes.includes(flowerType)}
        onChange={() => toggleFlowerType(flowerType)}
      />
      <label htmlFor={`flower-type-${flowerType}`} style={{ marginLeft: '4px' }}>
        {flowerType}
      </label>
    </div>
  ))}
</ValidatedField>

注意事项 #

• 若你的ValidatedField组件对表单值格式有要求，需确保它能正确接收并提交数组类型的选中值
• 调整验证规则：比如原本的单选必填规则，要改为检查选中数组的长度（如minLength: 1）
• 样式可根据项目需求自定义，比如横向排列复选框、添加分组容器等

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