如何修改现有React下拉框组件代码实现多选项选择功能？

你给<select>添加multiple属性后不生效，是因为仅修改了标签属性，对应的状态管理、取值逻辑还是单选的实现，需要做如下调整：

修改点梳理 #

1. 调整状态类型
   多选场景下选中值为数组类型，因此把状态初始化代码改为：
   const [currentSelection, setCurrentSelection] = useState([]);
   同时需要保证父组件传入的value属性也对应为数组类型，默认空选传空数组[]即可。

2. 给select标签添加属性
   在<select>标签上添加multiple属性，可额外加size属性控制默认展示的选项行数，比如设为size={5}就默认展示5行选项。

3. 重写onChange取值逻辑
   多选模式下不能直接取e.target.value，需要遍历选中的选项收集值：

onChange={e => {
  e.persist();
  // 收集所有选中项的value生成数组
  const selectedValues = Array.from(e.target.selectedOptions).map(item => item.value);
  setCurrentSelection(selectedValues);
  handleChange(selectedValues);
  setFieldValid(true);
}}

4. 调整空值判断逻辑
   原来的样式判断是对比currentSelection === ""，现在要改为判断数组长度：
   currentSelection.length === 0 ? "dropdown-select-grey" : "dropdown-select-black"

注意 #

原生select开启multiple属性后默认会渲染为平铺的选项列表，不会是原来点击展开的下拉交互样式。如果你需要保留点击弹出下拉、选完收起的交互，原生标签无法实现，建议自行封装自定义下拉组件，或者直接使用第三方组件库的多选下拉能力（比如Ant Design的Select组件开启mode="multiple"配置）。

修改后完整代码 #

const SelectMultipleDropdown = props => {  
  const {
    name,
    required,
    placeholder,
    handleChange,
    choices,
    value,
    fieldValid,
    setFieldValid
  } = props;
  // 初始值改为空数组
  const [currentSelection, setCurrentSelection] = useState([]);  

  return (
    <div>
      <p className="field-component-title">
        {name}
        {required ? <span className="required-star"> *</span> : ""}
      </p>
      <select 
        // 添加multiple属性
        multiple
        size={4}
        className={`dropdown-select-field field-component-input-box ${
          // 空值判断改为判断数组长度
          currentSelection.length === 0
            ? "dropdown-select-grey"
            : "dropdown-select-black"
        } ${fieldValid ? "" : "dropdown-select-invalid"}`}
        onChange={e => {
          e.persist();
          // 收集所有选中项的value
          const selectedVals = Array.from(e.target.selectedOptions).map(opt => opt.value);
          setCurrentSelection(selectedVals);
          handleChange(selectedVals);
          setFieldValid(true);
        }}
        value={value}
      >
        <option value="">{placeholder}</option>
        {choices.map(({ value, text }, index) => (
          <option key={index} value={value}>
            {text}
          </option>
        ))}
      </select>
    </div>
  );
};

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