a64654612 2023-01-25 17:35 采纳率: 88%
浏览 167
已结题

(继续等一个回答~)两个下拉框使用同一组数据,做互斥,并且在当前下拉框中过滤

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

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

事件是用的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;

  • 写回答

7条回答 默认 最新

  • 社区专家-Monster-XH 2023-01-25 21:10
    关注

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

    首先,在父组件中维护一个状态变量 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;
    
    

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    1人已打赏
查看更多回答(6条)

报告相同问题?

问题事件

  • 系统已结题 2月5日
  • 已采纳回答 1月28日
  • 修改了问题 1月28日
  • 修改了问题 1月28日
  • 展开全部

悬赏问题

  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题