xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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={{  200 }}
        placeholder="Select a person"
        onChange={onChange}
      >
        {
          optionsGenerator(optionsA)
        }
      </Select>
      <Select
        style={{  200 }}
        placeholder="Select a person"
        onChange={onChangeB}
      >
        {
          optionsGenerator(optionsB)
        }
      </Select>
      <Select
        style={{  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={{  200 }}
        placeholder="Select a person"
        onChange={onChange}
        onSearch={onSearch}
        allowClear
      >
        {
          optionsGenerator(optionsA)
        }
      </Select>
      <Select
        style={{  200 }}
        placeholder="Select a person"
        onChange={onChangeB}
        allowClear
      >
        {
          optionsGenerator(optionsB)
        }
      </Select>
      <Select
        style={{  200 }}
        placeholder="Select a person"
        onChange={onChangeC}
        allowClear
      >
        {
          optionsGenerator(optionsC)
        }
      </Select>
    </>
  );
};

export {
  MultiSelects,
};

export default MultiSelects;

---