（继续等一个回答～）两个下拉框使用同一组数据，做互斥，并且在当前下拉框中过滤
明天拿到电脑试一下采纳， 谢谢大家解答。
两个下拉框使用同一组数据，做互斥，如果先选中的下拉框选中其中一个数据，那么被选中的数据就不会在第二个下拉当中出现。也不会被当前选中的下拉中出现
事件是用的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;
要让这两个下拉框使用同一组数据并互斥，可以在父组件中维护一个状态变量存储当前被选中的下拉框中的值，然后在子组件中根据这个状态变量来过滤数据。
首先，在父组件中维护一个状态变量 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;
这样，第一个下拉框中选中的值就不会在第二个下拉框中出现，且第二个下拉框中选中的值也不会在第一个下拉框中出现。
我前面发给你的链接有用吗，我看它的需求跟你的一模一样，我发在这里:
const Component = () => {
const [options1, setOption1] = React.useState(options);
const [options2, setOption2] = React.useState(options);
return (
<>
<Select
isMulti
options={options1}
onChange={(v1) => {
setOption2(options.filter((o2) => !v1.includes(o2)));
}}
/>
<div style={{ height: 30 }} />
<Select
isMulti
options={options2}
onChange={(v2, a) => {
setOption1(options.filter((o1) => !v2.includes(o1)));
}}
/>
</>
);
};
望采纳！！！新年快乐！！！
React不会。给你一个vue的例子把.思路参考下
首先需要4个el-select下拉框，该文章讲的是单选的下拉框
给下拉框绑定数据，有4个下拉框，所以要绑定4个值，放到一个hobby对象中，可以看的更加清楚明了,
hobby1,hobby2,hobby3,hobby4为参照属性。编写方法，仅需要一个change方法，通过操作hobby对象，来控制下拉框选option的disabled属性。
<el-form label-width="80px">
<el-form-item label="爱好1">
<el-select v-model="hobby.hobby1" @change="changeSelect">
<el-option
v-for="(item,index) in hobbyList"
:key="index"
:label="item.value"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="爱好2">
<el-select v-model="hobby.hobby2" @change="changeSelect">
<el-option
v-for="(item,index) in hobbyList"
:key="index"
:label="item.value"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="爱好3">
<el-select v-model="hobby.hobby3" @change="changeSelect">
<el-option
v-for="(item,index) in hobbyList"
:key="index"
:label="item.value"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="爱好4">
<el-select v-model="hobby.hobby4" @change="changeSelect">
<el-option
v-for="(item,index) in hobbyList"
:key="index"
:label="item.value"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-form>
hobby1: '',
hobby2: '',
hobby3: '',
hobby4: '',
hobby: {//el-select绑定的对象
hobby1: '',
hobby2: '',
hobby3: '',
hobby4: ''
},
hobbyList: [//下拉框遍历option
{value: '001', disabled: false},
{value: '002', disabled: false},
{value: '003', disabled: false},
{value: '004', disabled: false},
{value: '005', disabled: false},
{value: '006', disabled: false}
]
changeSelect (val) {
// 先把hobbyList恢复默认值，即所有的选项都是可选
this.hobbyList.forEach(item => {
item.disabled = false
})
// 判断hobby对象中，哪个属性发生了变化
// 将选中值val直接赋值给发生变化的值，更新hobby对象
if (this.hobby.hobby1 !== this.hobby1) {
this.hobby.hobby1 = val
} else if (this.hobby.hobby2 !== this.hobby2) {
this.hobby.hobby2 = val
} else if (this.hobby.hobby3 !== this.hobby3) {
this.hobby.hobby3 = val
} else if (this.hobby.hobby4 !== this.hobby4) {
this.hobby.hobby4 = val
}
// 对hobby对象遍历，hobby中有哪一项，就把hobbyList中该项的disabled属性变为true，禁用
for (var key in this.hobby) {
this.hobbyList.forEach(item => {
if (this.hobby[key] === item.value) {
item.disabled = true
}
})
}
// 把hobby对象的值暂时存一下，作为参照，分别存到hobby1，hobby2，hobby3.hobby4中
this.hobby1 = this.hobby.hobby1
this.hobby2 = this.hobby.hobby2
this.hobby3 = this.hobby.hobby3
this.hobby4 = this.hobby.hobby4
}
提供参考实例【vue+elementui单选el-select下拉框的互斥问题】，链接：https://www.jianshu.com/p/fc6849741a69
import React, {useState} from 'react'
import {Select, Form} from "antd";
const {Item} = Form;
const {Option} = Select;
function Test() {
const [optionValue1, setOptionValue1] = useState(null)
const [optionValue2, setOptionValue2] = useState(null)
const options =
[
{
value: 1,
name: 'AA',
},
{
value: 2,
name: 'BB',
},
{
value: 3,
name: 'CC',
},
{
value: 4,
name: 'DD',
},
{
value: 5,
name: 'EE',
},
]
return (
<Form>
<Item>
<Select value={optionValue1} onChange={setOptionValue1}>
{
options.filter(item => item.value !== optionValue2).map(item =>
<Option value={item.value} key={item.value}>
{item.name}
</Option>
)
}
</Select>
</Item>
<Item>
<Select value={optionValue2} onChange={setOptionValue2}>
{
options.filter(item => item.value !== optionValue1).map(item =>
<Option value={item.value} key={item.value}>
{item.name}
</Option>
)
}
</Select>
</Item>
</Form>
)
}
export default Test;
- 看下这篇博客，也许你就懂了，链接：输入框点击出现下拉框。下拉框点击不隐藏下拉框同时出现详情弹窗
import React from 'react'
import { Select, Form } from "antd";
function Test() {
const {Item} =Form;
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',
},
]
return (
<Form>
<Item>
<Select
value={value}
onChange={(e)=>{dispatch({type:'set',payload:{value:e}});}}
>
{
options.map(item=>{
if(item.value !== value1){
return <Option value={item.value} key={item.value}>{item.name}</Option>
}
})
}
</Select>
</Item>
<Item>
<Select
value={value1}
onChange={(e)=>{dispatch({type:'set',payload:{value1:e}});}}
>
{
options.map(item=>{
if(item.value !== value){
return <Option value={item.value} key={item.value}>{item.name}</Option>
}
})
}
</Select>
</Item>
</Form>
)
}
export default Test;