multi selects & mutually exclusive
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的更多相关文章
- weblogic补丁安装失败(Patch B25A is mutually exclusive and cannot coexist with patch(es): UIAL)
由于曝出漏洞(CVE-2017-3248)需要将weblogic补丁更新至B25A,但是出现报错.如下: Conflict(s) detected - resolve conflict conditi ...
- MECE分析法(Mutually Exclusive Collectively Exhaustive)
什么是MECE分析法? MECE,是Mutually Exclusive Collectively Exhaustive,中文意思是“相互独立,完全穷尽”. 也就是对于一个重大的议题,能够做到不重叠. ...
- 金字塔原理——MECE(Mutually Exclusive Collectively Exhaustive)
一.金字塔原理 它的样子: 一个中心思想,分出下面2到N个思想支撑,每个分论点下面又有2到N个思想(事实或数据)支撑,以此类推,形状如金字塔.原则是以终为始(先结果后原因),以上统下,归纳分组,逻辑递 ...
- 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 ...
- Oracle Database 11g express edition
commands : show sys connect sys as sysdba or connect system as sysdba logout or disc clear screen or ...
- 大规模视觉识别挑战赛ILSVRC2015各团队结果和方法 Large Scale Visual Recognition Challenge 2015
Large Scale Visual Recognition Challenge 2015 (ILSVRC2015) Legend: Yellow background = winner in thi ...
- Automake
Automake是用来根据Makefile.am生成Makefile.in的工具 标准Makefile目标 'make all' Build programs, libraries, document ...
- 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 ...
- PostGIS导入导出SHP文件常用命令
SHP导入POSTGIS数据库 引用 直接导入数据库 shp2pgsql -I -s 2437 -W GBK shop_point.shp public.ntable | psql -U postg ...
随机推荐
- 虚函数表-C++多态的实现原理
目录 1.说明 2.虚函数表 3.代码示例 参考:http://c.biancheng.net/view/267.html 1.说明 我们都知道多态指的是父类的指针在运行中指向子类,那么它的实现原理是 ...
- Web漏洞扫描-Burp Suite
Web漏洞扫描-Burp Suite 一.Burp Suite概述 二.功能及特点 三.Burp Suite安装 四.Burp Suite使用 一.Burp Suite概述 安全渗透界使用最广泛的漏扫 ...
- Docker (一、dockerfile-node.js)
1.基本说明 Dockfile是一个用于编写docker镜像生成过程的文件,其有特定的语法.在一个文件夹中,如果有一个名字为Dockfile的文件,其内容满足语法要求,在这个文件夹路径下执行命令:do ...
- 如何学习Java?从标识符开始
标识符 1.定义 Java对各种变量.方法和类等要素命名时使用的字符序列称为标识符(包含但不限于:类名.变量名.方法名.接口名.包名--) 2.命名规则 1.由26个英文字母大小写,0-9,_或$组成 ...
- C++模板的介绍
作者:良知犹存 转载授权以及围观:欢迎添加微信:Allen-Iverson-me-LYN 1. 模板是泛型编程的基础,泛型编程即以一种独立于任何特定类型的方式编写代码.C++模板的作用,类 ...
- Codeforces Round #678 (Div. 2)【ABCD】
比赛链接:https://codeforces.com/contest/1436 A. Reorder 题解 模拟一下这个二重循环发现每个位置数最终都只加了一次. 代码 #include <bi ...
- 2020牛客暑期多校训练营(第二场) Boundary
传送门:Boundary 题意:给你n个点的坐标,问最多有多少个点可以在同一个圆上,(0,0)必须在这个圆上. 题解:三个点确定一个圆,所以暴力枚举两个点和(0,0)组成的圆,如果三个点不共线的话, ...
- Find a multiple POJ - 2356 容斥原理(鸠巢原理)
1 /* 2 这道题用到了鸠巢原理又名容斥原理,我的参考链接:https://blog.csdn.net/guoyangfan_/article/details/102559097 3 4 题意: 5 ...
- AtCoder Beginner Contest 177 E - Coprime (数学)
题意:给你\(n\)个数,首先判断它们是否全都__两两互质__.然后再判断它们是否全都互质. 题解:判断所有数互质很简单,直接枚举跑个gcd就行,关键是第一个条件我们要怎么去判断,其实我们可以对所有数 ...
- 11.PowerShell DSC之安装PowerShell Module
打开https://powershellgallery.com,检索你需要的目标模块,我们以安装名为"xmysql"的module为例: 自动安装 1.执行命令install-mo ...