React Dynamic MultiSelect联动需求咨询：州与城市关联选择

我是React新手，已经实现了支持选择州列表的MultiSelect组件，现在想优化交互，有三个递进需求：

1. 在同一个MultiSelect中，选中某州后，其对应城市自动显示并处于选中状态；
2. 若上述方案不可行，改为下拉列表展示州及下属城市，选中州时自动选中对应城市；
3. 若以上均不可行，实现MultiSelect默认全选所有选项。

先修正原伪代码的语法错误，得到可运行的基础版本：

import * as React from "react";
import { MultiSelect } from '你的MultiSelect组件库'; // 补充实际组件库，如@mui/material/MultiSelect

// 修正类型定义：存储选中州和城市的对象类型
type StateCityData = {
  states: string[];
  cities: string[];
};

const [selectedData, setSelectedData] = React.useState<StateCityData>({
  states: [],
  cities: []
});

// 整理州与城市的映射关系，便于维护
const stateCityMap: Record<string, string[]> = {
  Utah: ["Salt Lake"],
  Oregon: ["Medford", "Portland"],
  Wisconsin: [] // 威斯康星暂未配置城市，可后续补充
};

const allStates = Object.keys(stateCityMap);

return (
  <form>
    <MultiSelect
      placeholder="请选择州"
      options={allStates.map(x => ({ label: x, value: x }))}
      values={selectedData.states}
      onItemsChange={(selectedItems) => {
        const selectedStateValues = selectedItems?.map(item => item.value) || [];
        setSelectedData(prev => ({
          ...prev,
          states: selectedStateValues
        }));
      }}
    />
  </form>
);

方案1：选中州自动关联选中对应城市（同个MultiSelect） #

实现思路 #

• 生成包含州和城市的完整选项列表，城市选项加前缀-区分层级
• 在选中事件中自动关联州对应的城市，同时保留手动单独选中的城市
• 处理取消选中州时，移除未手动选中的对应城市

代码实现 #

import * as React from "react";
import { MultiSelect } from '你的MultiSelect组件库';

type StateCityData = {
  states: string[];
  cities: string[];
};

const [selectedData, setSelectedData] = React.useState<StateCityData>({
  states: [],
  cities: []
});

const stateCityMap: Record<string, string[]> = {
  Utah: ["Salt Lake"],
  Oregon: ["Medford", "Portland"],
  Wisconsin: []
};

// 生成带层级的完整选项列表
const generateAllOptions = () => {
  const options = [];
  for (const state of Object.keys(stateCityMap)) {
    // 添加州选项，用前缀标记类型
    options.push({ label: state, value: `state_${state}`, type: 'state' });
    // 添加对应城市选项，用前缀区分层级
    stateCityMap[state].forEach(city => {
      options.push({ label: `- ${city}`, value: `city_${city}`, type: 'city', parentState: state });
    });
  }
  return options;
};

const allOptions = generateAllOptions();

const handleItemsChange = (selectedItems: any[]) => {
  const selectedStates: string[] = [];
  const selectedCities: string[] = [];
  const manuallySelectedCities = new Set();

  // 收集手动选中的项
  selectedItems.forEach(item => {
    if (item.type === 'state') {
      selectedStates.push(item.value.replace('state_', ''));
    } else if (item.type === 'city') {
      manuallySelectedCities.add(item.value.replace('city_', ''));
    }
  });

  // 自动添加选中州对应的城市
  selectedStates.forEach(state => {
    stateCityMap[state].forEach(city => selectedCities.push(city));
  });

  // 保留手动选中的独立城市
  manuallySelectedCities.forEach(city => {
    if (!selectedCities.includes(city)) selectedCities.push(city);
  });

  // 更新状态并去重
  setSelectedData({
    states: selectedStates,
    cities: [...new Set(selectedCities)]
  });
};

// 生成MultiSelect需要的选中值集合
const getSelectedValues = () => {
  const values = [];
  selectedData.states.forEach(state => values.push(`state_${state}`));
  selectedData.cities.forEach(city => values.push(`city_${city}`));
  return values;
};

return (
  <form>
    <MultiSelect
      placeholder="请选择州/城市"
      options={allOptions}
      values={getSelectedValues()}
      onItemsChange={handleItemsChange}
    />
  </form>
);

方案2：下拉列表展示州-城市分组，选中州自动选中下属城市 #

实现思路 #

• 构建分组选项结构，州作为组名，下属城市为组内选项
• 选中州时自动添加该组所有城市到选中列表，取消州时移除未手动选中的对应城市
• 若组件不支持分组，可通过标签样式区分州与城市（如州标签加粗）

代码实现（以支持分组的MultiSelect为例） #

import * as React from "react";
import { MultiSelect } from '你的MultiSelect组件库';

type StateCityData = {
  states: string[];
  cities: string[];
};

const [selectedData, setSelectedData] = React.useState<StateCityData>({
  states: [],
  cities: []
});

const stateCityMap: Record<string, string[]> = {
  Utah: ["Salt Lake"],
  Oregon: ["Medford", "Portland"],
  Wisconsin: []
};

// 构建分组选项
const groupedOptions = Object.entries(stateCityMap).map(([state, cities]) => ({
  groupName: state,
  options: [
    { label: `全选${state}`, value: `state_${state}`, type: 'state' },
    ...cities.map(city => ({ label: city, value: `city_${city}`, type: 'city', parentState: state }))
  ]
}));

const handleItemsChange = (selectedItems: any[]) => {
  const selectedStates: string[] = [];
  const selectedCities: string[] = [];
  const manuallySelectedCities = new Set();

  // 收集手动选中项
  selectedItems.forEach(item => {
    if (item.type === 'state') {
      selectedStates.push(item.value.replace('state_', ''));
    } else if (item.type === 'city') {
      manuallySelectedCities.add(item.value.replace('city_', ''));
    }
  });

  // 自动添加选中州的所有城市
  selectedStates.forEach(state => {
    stateCityMap[state].forEach(city => selectedCities.push(city));
  });

  // 保留手动选中的独立城市
  manuallySelectedCities.forEach(city => {
    if (!selectedCities.includes(city)) selectedCities.push(city);
  });

  // 过滤掉取消州后未手动选中的城市
  const allSelectedStateCities = selectedStates.flatMap(state => stateCityMap[state]);
  const finalCities = selectedCities.filter(city => 
    manuallySelectedCities.has(city) || allSelectedStateCities.includes(city)
  );

  setSelectedData({
    states: selectedStates,
    cities: [...new Set(finalCities)]
  });
};

// 生成最终选中值
const getSelectedValues = () => {
  const values = [];
  selectedData.states.forEach(state => values.push(`state_${state}`));
  // 只添加未归属选中州的手动选中城市
  selectedData.cities.forEach(city => {
    const belongsToSelectedState = selectedData.states.some(state => stateCityMap[state].includes(city));
    if (!belongsToSelectedState) values.push(`city_${city}`);
  });
  return values;
};

return (
  <form>
    <MultiSelect
      placeholder="请选择州/城市"
      groupedOptions={groupedOptions}
      values={getSelectedValues()}
      onItemsChange={handleItemsChange}
      allowSelectAll={false}
    />
  </form>
);

方案3：默认全选所有选项 #

实现思路 #

初始化时直接将所有选项的value设置为组件的选中值，若组件支持defaultValues属性，也可直接配置该属性。

代码实现 #

import * as React from "react";
import { MultiSelect } from '你的MultiSelect组件库';

type StateCityData = {
  states: string[];
  cities: string[];
};

const stateCityMap: Record<string, string[]> = {
  Utah: ["Salt Lake"],
  Oregon: ["Medford", "Portland"],
  Wisconsin: []
};

const allStates = Object.keys(stateCityMap);
// 若需要同时全选所有城市，可使用下面的allCities
const allCities = Object.values(stateCityMap).flat();

// 初始化全选所有州
const [selectedData, setSelectedData] = React.useState<StateCityData>({
  states: [...allStates],
  cities: []
});

// 若需同时全选州和城市，替换为下面的初始化
// const [selectedData, setSelectedData] = React.useState<StateCityData>({
//   states: [...allStates],
//   cities: [...allCities]
// });

return (
  <form>
    <MultiSelect
      placeholder="请选择州"
      options={allStates.map(x => ({ label: x, value: x }))}
      values={selectedData.states}
      onItemsChange={(selectedItems) => {
        const selectedStateValues = selectedItems?.map(item => item.value) || [];
        setSelectedData(prev => ({
          ...prev,
          states: selectedStateValues
        }));
      }}
    />
  </form>
);

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