【antd】下拉框内容联动_一个下拉框联动另一个下拉框-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41536505/article/details/129359161

本文探讨了在ReactJS中如何利用Map数据结构实现在antd组件库中的下拉框联动效果。当一个下拉框选项被修改时，另一个相关联的下拉框内容会同步更新。通过将下拉框选项存储为Map的值，并根据源数据和目标数据的键值关系进行操作，可以达到联动的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

如何让一个数据跟着另一个数据联动起来，比如修改一个下拉框，一个下拉框的内容也能一起改变

实现

可以借助Map来实现这个功能

把下拉框的option写成Map的value
当前更改的数据当做源数据，另一个跟随改变的数据是目标数据
源数据在Map里的key为 source目标数据在Map里的key为当前的源数据的值

那么我们可以得出些一个对应下拉框内容的Map

export const OPTIONS = new Map([
  [
    'source',
    [
      {
        value: 'fruit',
        label: '水果',
      },
      {
        value: 'vegetable',
        label: '蔬菜',
      },
    ],
  ],
  [
    'fruit',
    [
      {
        value: 'apple',
        label: '水果',
      },
      {
        value: 'orange',
        label: '橘子',
      },
    ],
  ],
  [
    'vegetable',
    [
      {
        value: 'cabbage',
        label: '白菜',
      },
      {
        value: 'carrot',
        label: '胡萝卜',
      },
    ],
  ],
])
	const [state, setState] = useState({
    source: '',
    target: ''
  })

  const sourceOption = OPTIONS.get('source')
  const targetOption = OPTIONS.get(state.source)
<>
<Select value={state.source}>
     {sourceOption.map((item) => (
      	<Select.Option key={item.value} value={item.value}>
           {item.label}
        </Select.Option>
          ))}
 </Select>

<Select value={state.target}>
     {targetOption.map((item) => (
      	<Select.Option key={item.value} value={item.value}>
           {item.label}
        </Select.Option>
          ))}
 </Select>
<>