ReactJS中Select组件特殊多选标签逻辑实现求助

要实现你需要的互斥逻辑，核心是通过维护组件的选中状态，在onChange事件中对新选中的值进行判断处理，具体实现如下：

修改后的完整代码 #

import React, { useState } from "react";
import { Select } from "antd";

const { Option } = Select;
const data = [
  { id: 55, name: "Appraisals" },
  { id: 65, name: "Carpet Cleaning" },
  { id: 53, name: "Duct cleaning & antibacterial" },
  { id: 54, name: "Electrical" },
  { id: 62, name: "Handyman Services" },
  { id: 68, name: "Home Cleaning Services" }
];

const App = () => {
  // 维护选中的状态值
  const [selectedValues, setSelectedValues] = useState([]);

  const handleChange = (newValues) => {
    let updatedValues = [...newValues];
    // 判断新选中的值是否包含"All"（对应value为null）
    const hasAll = updatedValues.includes(null);
    
    if (hasAll) {
      // 若选中All，仅保留All选项
      updatedValues = [null];
    } else {
      // 若未选中All，但之前选中过，直接过滤掉All并保留新选中项
      updatedValues = updatedValues.filter(val => val !== null);
    }
    
    setSelectedValues(updatedValues);
  };

  return (
    <Select
      mode="tags"
      style={{ width: "100%" }}
      showSearch={false}
      value={selectedValues}
      onChange={handleChange}
    >
      <Option value={null}>All</Option>
      {data?.map((el) => (
        <Option key={el?.id} value={el?.id}>
          {el?.name}
        </Option>
      ))}
    </Select>
  );
};

export default App;

关键逻辑说明 #

1. 状态维护：通过useState保存当前选中的所有值，这样就能在onChange中同时获取新选中值和历史选中状态；
2. 互斥判断：
   • 当新选中的数组包含null（即"All"选项），直接将选中值重置为仅[null]，清空其他已选标签；
   • 当用户已选中"All"后再选其他选项，新的选中数组会自动移除null，此时直接过滤掉null，保留新选中的选项；
3. 状态绑定：将selectedValues绑定到Select的value属性，确保组件UI和选中状态完全同步。

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