（继续等一个回答～）两个下拉框使用同一组数据，做互斥，并且在当前下拉框中过滤

Question

明天拿到电脑试一下采纳， 谢谢大家解答。

两个下拉框使用同一组数据，做互斥，如果先选中的下拉框选中其中一个数据，那么被选中的数据就不会在第二个下拉当中出现。也不会被当前选中的下拉中出现

事件是用的dispatch
######

import React from 'react'
import { Select, Form } from "antd";
function Test(props) {
 const {Item} =Form;
const {state,dispatch} = props;
 const {Option} = Select;
const { value, value1 } = state;
const   options = 
        [
        {
            value: 1,
            name: 'AA',
        },
        {
            value: 2,
            name: 'BB',
        },
        {
            value: 3,
            name: 'CC',
        },
        {
            value: 4,
            name: 'DD',
        },
        {
            value: 5,
            name: 'EE',
        },
       
      ]
  const options1 = JSON.parse(JSON.stringify(options));
  const options2 = JSON.parse(JSON.stringify(options));
    return (
        <Form>
            <Item>
                <Select
                   value={value}
                   onChange={(e)=>{dispatch({type:'set',payload:{value:e}});}}
                >
                   {
                    options1.map(item=>{
                        <Option value={item.value} key={item.value}>
                            {item.name}
                        </Option>
                    })
                   }
                </Select>
            </Item>
            <Item>
                <Select
                  value={value1}
                  onChange={(e)=>{dispatch({type:'set',payload:{value1:e}});}}
                >
                   {
                    options2.map(item=>{
                        <Option value={item.value} key={item.value}>
                            {item.name}
                        </Option>
                    })
                   }
                </Select>
            </Item>
        </Form>
    )
}
export default Test;

Answer 1

要让这两个下拉框使用同一组数据并互斥，可以在父组件中维护一个状态变量存储当前被选中的下拉框中的值，然后在子组件中根据这个状态变量来过滤数据。

首先，在父组件中维护一个状态变量 selectedValue 和一个方法 handleSelectedValue 用来更新这个状态变量。

const [selectedValue, setSelectedValue] = useState();

const handleSelectedValue = value => {
    setSelectedValue(value);
}

然后在第一个下拉框中传入一个 onChange 事件，并将其绑定到 handleSelectedValue 方法上。

<Select onChange={handleSelectedValue}>

在第二个下拉框中过滤掉第一个下拉框中选中的值。

const filteredOptions = options.filter(item => item.value !== selectedValue);

<Select>
    {filteredOptions.map(item => (
        <Option value={item.value} key={item.value}>
            {item.name}
        </Option>
    ))}
</Select>

完整代码如下：

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

function Test() {
 const {Item} =Form;
 const {Option} = Select;
const   options = 
        [
        {
            value: 1,
            name: 'AA',
        },
        {
            value: 2,
            name: 'BB',
        },
        {
            value: 3,
            name: 'CC',
        },
        {
            value: 4,
            name: 'DD',
        },
        {
            value: 5,
            name: 'EE',
        },
       
      ]
 const [selectedValue, setSelectedValue] = useState();

 const handleSelectedValue = value => {
    setSelectedValue(value);
 }
    return (
        <Form>
            <Item>
                <Select onChange={handleSelectedValue}>
                    {options.map(item => (
                        <Option value={item.value} key={item.value}>
                            {item.name}
</Option>
                    ))}
                </Select>
            </Item>
            <Item>
                <Select>
                    {options.filter(item => item.value !== selectedValue).map(item => (
                        <Option value={item.value} key={item.value}>
                            {item.name}
                        </Option>
                    ))}
                </Select>
            </Item>
        </Form>
    )
}
export default Test;

这样，第一个下拉框中选中的值就不会在第二个下拉框中出现，且第二个下拉框中选中的值也不会在第一个下拉框中出现。