React Hooks使用multiselect-react-dropdown无法限制最多选2项如何解决

问题根源 #

你使用的multiselect-react-dropdown组件的选择回调事件名称配置错误，该组件监听选择/取消选择的事件不是onChange，而是onSelect（新增选中时触发）和onRemove（取消选中时触发）。你当前绑定的onChange不会在选项变更时触发，导致selectedOption状态一直是空值，自然不会触发后续的数量限制逻辑。

修复方案 #

1. 替换错误的事件绑定，用onSelect和onRemove同步选中状态
2. 可保留原有选项隐藏逻辑，也可以额外在组件下方加红色提示文本更直观
3. 如果你不希望到上限后隐藏所有可选项，也可以在选择回调里加判断，超过2个时直接拦截更新，同时弹出提示

修复后的完整代码 #

import React, { useState } from "react";
import Multiselect from "multiselect-react-dropdown";

const options = [
  { key: "Apple", id: 1 },
  { key: "Bags", id: 2 },
  { key: "Coat", id: 3 },
  { key: "Drum", id: 4 }
];

const App = () => {
  const maxOptions = 2;
  const [selectedOption, setSelectedOption] = useState([]);
  // 选中时触发
  const handleSelect = (selectedList) => {
    setSelectedOption(selectedList);
  };
  // 取消选中时触发
  const handleRemove = (selectedList) => {
    setSelectedOption(selectedList);
  };

  const onNominate = () => {
    alert("hello");
    // ...
  };

  return (
    <div className="App">
      <div className="navbar-nav">
        <div className="leftNavItem"></div>
      </div>
      <h1>Maximum 2 selections</h1>
      <div className="nomineeSelectBox">
        <Multiselect
          onSelect={handleSelect}
          onRemove={handleRemove}
          options={selectedOption.length === maxOptions ? [] : options}
          displayValue="key"
          showCheckbox={true}
          noOptionsMessage={() => {
            return selectedOption.length === maxOptions
              ? "最多已选择2个选项"
              : "无可用选项";
          }}
        />
        {/* 额外加的外部提示，更明显 */}
        {selectedOption.length === maxOptions && (
          <p style={{ color: "red", fontSize: "12px", marginTop: "4px" }}>
            最多已选择2个选项
          </p>
        )}
      </div>
      <div className="nominateButton">
        <input type="button" value="Next" onClick={onNominate} />
      </div>
    </div>
  );
};

export default App;

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