React-select 多个 select 一页

Question

我有点困惑，这是一个示例，其中有几个 select 输入具有相同的状态，请在此处查看：https://stackblitz.com/edit/get-selected-by-value-multi-select-react-agamk4?file=src/App.js 所以请：

当我 select 一个选项值不适用于其余 select 输入时，我该如何做到这一点？
如何将每个 select 的值放入存储区？
我需要多个商店吗？

为了更清楚，这里有一个屏幕截图：https://www.awesomescreenshot.com/image/19798040?key=bb839c650c93b436066e03d33d5515b0我希望这是有道理的？最好的方法是什么？谢谢。

Answer 1

我已经分享了只有一个状态的代码。如果您只需要一个状态，但对不同的 select 输入有多个状态，则可以使用此方法，因为您只有 3 个输入，所以也不错。如果 select 个输入的数量更多，则使用单一状态方法会很有用。

import React, { useState } from 'react';
import Select from 'react-select';

function App() {
  const data = [
    {
      value: 1,
      label: 'cerulean',
    },
    {
      value: 2,
      label: 'fuchsia rose',
    },
    {
      value: 3,
      label: 'true red',
    },
    {
      value: 4,
      label: 'aqua sky',
    },
    {
      value: 5,
      label: 'tigerlily',
    },
    {
      value: 6,
      label: 'blue turquoise',
    },
  ];

  // set value for default selection
  const [selectedValue, setSelectedValue] = useState([
    { value: [] },
    { value: [] },
    { value: [] },
  ]);

  // handle onChange event of the dropdown
  const handleChange = (e, no) => {
    setSelectedValue(
      selectedValue.map((item) => {
        return selectedValue.indexOf(item) === no
          ? { value: Array.isArray(e) ? e.map((x) => x.value) : [] }
          : item;
      })
    );
  };

  return (
    <div className="App">
      <Select
        className="dropdown"
        placeholder="Select Option"
        value={data.filter((obj) => selectedValue[0].value.includes(obj.value))} // set selected values
        options={data} // set list of the data
        onChange={(event) => handleChange(event, 0)} // assign onChange function
        isMulti
        isClearable
      />
      <br />
      <Select
        className="dropdown"
        placeholder="Select Option"
        value={data.filter((obj) => selectedValue[1].value.includes(obj.value))} // set selected values
        options={data} // set list of the data
        onChange={(event) => handleChange(event, 1)} // assign onChange function
        isMulti
        isClearable
      />
      <br />
      <Select
        className="dropdown"
        placeholder="Select Option"
        value={data.filter((obj) => selectedValue[2].value.includes(obj.value))} // set selected values
        options={data} // set list of the data
        onChange={(event) => handleChange(event, 2)} // assign onChange function
        isMulti
        isClearable
      />

      {selectedValue && (
        <div style={{ marginTop: 20, lineHeight: '25px' }}>
          <div>
            <b>Selected Value: </b> {JSON.stringify(selectedValue, null, 2)}
          </div>
        </div>
      )}
    </div>
  );
}

export default App;

Answer 2

{selectedValue && (
        <div style={{ marginTop: 20, lineHeight: '25px' }}>
          <div>
            <b>Selected Values: </b>
            <span>{
              selectedValue.map(item => item.value.length !== 0 ? 
                <li>{data.filter(data => data.value === item.value[0])[0].label}</li> :
                <li>No value selected</li>
                )
              }</span>
          </div>
        </div>
      )}

React-select 多个 select 一页

React-select multiple selects on one page

javascript

reactjs

react-select