[antd] lien de contenu de la liste déroulante

question

Comment lier une donnée à une autre donnée, comme modifier une liste déroulante, le contenu d'une liste déroulante peut également être modifié ensemble

accomplir

Cela peut être fait avec l'aide de Map

1. Écrivez l'option de la liste déroulante comme valeur de Map
2. Les données actuellement modifiées sont utilisées comme données source et les autres données qui suivent la modification sont les données cible
3. La clé des données source dans la carte est la clé des sourcedonnées cible dans la carte est la valeur des données source actuelles

Ensuite, nous pouvons obtenir une carte correspondant au contenu de la liste déroulante

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