multi selects & mutually exclusive

互斥 selects


import React, {
useState,
// useEffect,
// useRef,
} from 'react';
// import ReactDOM from 'react-dom'; // import 'antd/dist/antd.css'; import {
Select,
} from "antd"; const { Option } = Select; const optionsInit = [
{
value: "jack",
},
{
value: "lucy",
},
{
value: "tom",
}
]; const optionsGenerator = (datas = []) => {
return datas.map((item, i) => {
// console.log(`item`, item);
return <Option key={item.value} value={item.value}>{item.value}</Option>;
// return <Option key={item.value} value={item.value}>ABC</Option>;
});
}; const MultiSelects = () => {
const [optionsA, setOptionsA] = useState(optionsInit);
const [optionsB, setOptionsB] = useState(optionsInit);
const [optionsC, setOptionsC] = useState(optionsInit);
const [selectedOptions, setSelectedOptions] = useState([]);
// let optionsA = optionsInit || [];
// let optionsB = optionsInit || []; function onChange(value) {
// console.log(`selected A=`, value);
let arr = selectedOptions || [];
arr.push(value);
setSelectedOptions(arr);
console.log(`arr A`, arr);
// let options = optionsInit.filter(obj => !arr.includes(obj.value) ? obj : null);
let options = optionsInit.filter(obj => !arr.includes(obj.value));
// let options = optionsInit.filter(obj => obj.value !== value);
setOptionsB(options);
setOptionsC(options);
} function onChangeB(value) {
// console.log(`selected B=`, value);
let arr = selectedOptions || [];
arr.push(value);
setSelectedOptions(arr);
console.log(`arr B`, arr);
let options = optionsInit.filter(obj => !arr.includes(obj.value));
// let options = optionsInit.filter(obj => obj.value !== value);
setOptionsA(options);
setOptionsC(options);
} function onChangeC(value) {
// console.log(`selected C=`, value);
let arr = selectedOptions || [];
arr.push(value);
setSelectedOptions(arr);
console.log(`arr C`, arr);
let options = optionsInit.filter(obj => !arr.includes(obj.value));
// let options = optionsInit.filter(obj => obj.value !== value);
setOptionsA(options);
setOptionsB(options);
} return(
<>
<Select
style={{ width: 200 }}
placeholder="Select a person"
onChange={onChange}
>
{
optionsGenerator(optionsA)
}
</Select>
<Select
style={{ width: 200 }}
placeholder="Select a person"
onChange={onChangeB}
>
{
optionsGenerator(optionsB)
}
</Select>
<Select
style={{ width: 200 }}
placeholder="Select a person"
onChange={onChangeC}
>
{
optionsGenerator(optionsC)
}
</Select>
</>
);
}; export {
MultiSelects,
}; export default MultiSelects;

https://codesandbox.io/s/multi-antd-selects-dduwm

app.js


app-ok.js


import React, {
useState,
// useEffect,
// useRef,
} from 'react';
// import ReactDOM from 'react-dom'; // import 'antd/dist/antd.css'; import {
Select,
} from "antd"; const { Option } = Select; const optionsInit = [
{
value: "jack",
},
{
value: "lucy",
},
{
value: "tom",
}
]; const optionsGenerator = (datas = []) => {
return datas.map((item, i) => {
// console.log(`item`, item);
return <Option key={item.value} value={item.value}>{item.value}</Option>;
// return <Option key={item.value} value={item.value}>ABC</Option>;
});
}; const MultiSelects = () => {
const [selectedA, setSelectedA] = useState(null);
const [selectedB, setSelectedB] = useState(null);
const [selectedC, setSelectedC] = useState(null);
const [optionsA, setOptionsA] = useState(optionsInit);
const [optionsB, setOptionsB] = useState(optionsInit);
const [optionsC, setOptionsC] = useState(optionsInit);
const [selectedOptions, setSelectedOptions] = useState([]);
// let optionsA = optionsInit || [];
// let optionsB = optionsInit || []; function onSearch(value) {
console.log(`search A=`, value);
} function onChange(value) {
// console.log(`selected A=`, value);
let arr = selectedOptions || [];
if(value){
arr.push(value);
setSelectedA(value);
} else{
// console.log(`optionsA =`, optionsA);
// console.log(`selectedA =`, selectedA, typeof(selectedA));
// console.log(`arr =`, arr);
// ["jack", "lucy", "tom"]
arr = arr.filter(key => key !== selectedA);
// console.log(`arr =`, arr);
const options = optionsInit.filter(obj => !arr.includes(obj.value));
setOptionsA(options);
}
const setArr = new Set(arr);
setSelectedOptions([...setArr]);
console.log(`arr A`, arr);
// let options = optionsInit.filter(obj => !arr.includes(obj.value) ? obj : null);
const options = optionsInit.filter(obj => !arr.includes(obj.value));
// let options = optionsInit.filter(obj => obj.value !== value);
setOptionsB(options);
setOptionsC(options);
} function onChangeB(value) {
// console.log(`selected B=`, value);
let arr = selectedOptions || [];
if(value){
arr.push(value);
setSelectedB(value);
} else {
arr = arr.filter(key => key !== selectedB);
// console.log(`arr =`, arr);
const options = optionsInit.filter(obj => !arr.includes(obj.value));
setOptionsB(options);
}
const setArr = new Set(arr);
setSelectedOptions([...setArr]);
console.log(`arr B`, arr);
const options = optionsInit.filter(obj => !arr.includes(obj.value));
// let options = optionsInit.filter(obj => obj.value !== value);
setOptionsA(options);
setOptionsC(options);
} function onChangeC(value) {
// console.log(`selected C=`, value);
let arr = selectedOptions || [];
if(value){
arr.push(value);
setSelectedC(value);
} else {
arr = arr.filter(key => key !== selectedC);
// console.log(`arr =`, arr);
const options = optionsInit.filter(obj => !arr.includes(obj.value));
setOptionsC(options);
}
const setArr = new Set(arr);
setSelectedOptions([...setArr]);
console.log(`arr C`, arr);
const options = optionsInit.filter(obj => !arr.includes(obj.value));
// let options = optionsInit.filter(obj => obj.value !== value);
setOptionsA(options);
setOptionsB(options);
} return(
<>
<Select
style={{ width: 200 }}
placeholder="Select a person"
onChange={onChange}
onSearch={onSearch}
allowClear
>
{
optionsGenerator(optionsA)
}
</Select>
<Select
style={{ width: 200 }}
placeholder="Select a person"
onChange={onChangeB}
allowClear
>
{
optionsGenerator(optionsB)
}
</Select>
<Select
style={{ width: 200 }}
placeholder="Select a person"
onChange={onChangeC}
allowClear
>
{
optionsGenerator(optionsC)
}
</Select>
</>
);
}; export {
MultiSelects,
}; export default MultiSelects;

multi selects & mutually exclusive的更多相关文章

  1. weblogic补丁安装失败(Patch B25A is mutually exclusive and cannot coexist with patch(es): UIAL)

    由于曝出漏洞(CVE-2017-3248)需要将weblogic补丁更新至B25A,但是出现报错.如下: Conflict(s) detected - resolve conflict conditi ...

  2. MECE分析法(Mutually Exclusive Collectively Exhaustive)

    什么是MECE分析法? MECE,是Mutually Exclusive Collectively Exhaustive,中文意思是“相互独立,完全穷尽”. 也就是对于一个重大的议题,能够做到不重叠. ...

  3. 金字塔原理——MECE(Mutually Exclusive Collectively Exhaustive)

    一.金字塔原理 它的样子: 一个中心思想,分出下面2到N个思想支撑,每个分论点下面又有2到N个思想(事实或数据)支撑,以此类推,形状如金字塔.原则是以终为始(先结果后原因),以上统下,归纳分组,逻辑递 ...

  4. Events|sample space|mutually exclusive events

    5.2Events The collection of all 52 cards—the possible outcomes—is called the sample space for this e ...

  5. Oracle Database 11g express edition

    commands : show sys connect sys as sysdba or connect system as sysdba logout or disc clear screen or ...

  6. 大规模视觉识别挑战赛ILSVRC2015各团队结果和方法 Large Scale Visual Recognition Challenge 2015

    Large Scale Visual Recognition Challenge 2015 (ILSVRC2015) Legend: Yellow background = winner in thi ...

  7. Automake

    Automake是用来根据Makefile.am生成Makefile.in的工具 标准Makefile目标 'make all' Build programs, libraries, document ...

  8. Sphinx 2.2.11-release reference manual

    1. Introduction 1.1. About 1.2. Sphinx features 1.3. Where to get Sphinx 1.4. License 1.5. Credits 1 ...

  9. PostGIS导入导出SHP文件常用命令

    SHP导入POSTGIS数据库 引用 直接导入数据库 shp2pgsql  -I -s 2437 -W GBK shop_point.shp public.ntable | psql -U postg ...

随机推荐

  1. 20200927gryz校赛心得

    今天gyh学长给我们办了一场校内模拟赛,特地跑来记录一下心得 昨天晚上问了一下lkp学长,听说题目不卡常,不毒瘤,因此我在考试前20分钟仍在若无其事的练习着刚学的强连通分量,丝毫不慌 结果虽然rank ...

  2. codevs1700 施工方案第二季

    题目描述 Description c国边防军在边境某处的阵地是由n个地堡组成的.工兵连受命来到阵地要进行两期施工. 第一期的任务是挖掘暗道让所有地堡互联互通.现已勘测设计了m条互不相交的暗道挖掘方案, ...

  3. linux 一分钟安装maven linux

    mkdir maven cd maven/ wget https://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.6.3/binaries/ ...

  4. TcaplusDB 10周年 风雨兼程破浪行 自研存储见成长

    从找不到需求险些被叫停,到支撑亿级DAU的数据库行业标杆,腾讯云数据库TcaplusDB在风雨中走过了整整10年.辉映日月破风浪,十年一剑破九天.百万行代码就像淙淙流淌的数据溪流,终于在十年后汇成不可 ...

  5. Educational Codeforces Round 30

    Educational Codeforces Round 30  A. Chores 把最大的换掉 view code #pragma GCC optimize("O3") #pr ...

  6. KMP(算法描述)

    #include<iostream> using namespace std; const int N=10010,M=100010; int n,m; char p[N],s[M]; i ...

  7. Educational Codeforces Round 87 (Rated for Div. 2) D树状数组加二分删除的值

    Sample Input 5 4 1 2 3 4 5 -5 -1 -3 -1 Sample Output 3 思路,首先发现a[i]的值的范围是在1~n之间,每次插入我们可以直接把cnt[a[i]]+ ...

  8. 2020杭电多校 C / HDU 6879 - Mine Sweeper

    题意: t组输入,每组输入一个s 你需要输出一个r行c列的阵列,这个阵列中'X'代表炸弹,'.'表示没有炸弹 对于'.'这些位置都会有一个数值,这个值取决于这个位置附近8个位置,这8个位置一共有几个炸 ...

  9. HttpClient&&RestTemplate学习

    1. 什么是HttpClient HttpClient是Apache下面的子项目,可以提供高效的,最新的,功能丰富的支持HTTP协议的客户端编程工具包. 2. 为什么要学习HttpClient Htt ...

  10. codeforces 1030D Vasya and Triangle【思维+gcd】

    题目:戳这里 题意:选出三个点构成三角形,要求面积为n*m/k. 解题思路:因为三个点的坐标都是正整数,根据三角形面积公式(x1*(y2-y3)+x2*(y3-y1)+x3*(y1-y2))/2=n* ...