[antd] ссылка на содержимое раскрывающегося списка

вопрос

Как связать одни данные с другими данными, например изменить раскрывающийся список, содержимое раскрывающегося списка также можно изменить вместе

выполнить

Эту функцию можно реализовать с помощью Map

1. Запишите параметр раскрывающегося списка в качестве значения Map
2. Текущие измененные данные используются в качестве исходных данных, а другие данные, которые следуют за изменением, являются целевыми данными.
3. Ключ исходных данных в Карте — ключ sourceцелевых данных в Карте — значение текущих исходных данных

Затем мы можем получить карту, соответствующую содержимому раскрывающегося списка.

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>
<>