React-select 如何过滤掉已经选择的值？

Question

我有一个这样定义的选择组件：

this.state.list = [{label: "test1", value:1}, {label:"test2", value:2}, {label:"test3", value:3}]
this.state.selected = [{label:"test2", value:2}]

let listMap = this.state.list
let list = this.state.list

{listMap.length !== 0 ? listMap.map((item: any, key: number) => (
 <div>    
  <Select
     id="list for data"
     options={list}
     onChange={value => selectList(value)}
     placeholder="Select Your Option"
    />
 <div/>
))

我希望在选择test2 之后，我希望其他两个下拉菜单显示test1 和test3。

到目前为止我做了什么：

let y = this.state.selected.map(itemY => { return itemY.value })
let x = list.filter(itemX => !yFilter.includes(itemX.value)) // [{value: 1, label:"test1"},{value: 3, label: "test3"}]

然后将options 属性替换为x。

过滤器正在工作，但是，

占位符未更新选定的值。

我想要达到的目标：

对于下一个下拉列表[1]，只能选择那些未选择的：

Answer 1

你的状态应该是这样的

state = { items : [{value: 1, label:"test1", selected:false},{value: 1, label:"test2", selected:false},{value: 3, label: "test3", selected:false}]

然后，当单击一个选项时，它会将“选定”键设置为 true。之后，仅将选择 false 的对象映射为下拉项。记得使用 setState。

Answer 2

您必须将三个反应选择分开。当您在一个上应用过滤器时，它将适用于所有反应选择。过滤也将在所有反应选择中删除。您可以查看以下示例。 https://codesandbox.io/s/react-select-5u3rh

import React from "react";
import {
  render
} from "react-dom";
import ReactDOM from "react-dom";
import Select from "react-select";
import "react-select/dist/react-select.css";

class ReactSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      itemtitle: "",
      multi: true,
      multiValue: "eeee...",
      options: [{
          value: "Color",
          label: "Yellow"
        },
        {
          value: "Fruit",
          label: "Apple"
        },
        {
          value: "Tool",
          label: "Spanner"
        }
      ],
      options2: [{
          value: "Color",
          label: "Yellow"
        },
        {
          value: "Fruit",
          label: "Apple"
        },
        {
          value: "Tool",
          label: "Spanner"
        }
      ]
    };
  }
  onTitleChange(e, value) {
    this.setState({
      [e.target.name]: e.target.value
    });
    this.setState({
      multiValue: e.target.value
    });
  }
  handleOnChange(obj) {
    this.setState({
      multiValue: obj
    });
    this.setState({
      options2: this.state.options2.filter(v => v.value !== obj.value)
    })
  }
  handleOnChange2(obj) {
    this.setState({
      multiValue2: obj
    });
  }
  render() {
    return ( <
      div >
      <
      Select
      // multi={this.state.multi}
      options = {
        this.state.options
      }
      onChange = {
        this.handleOnChange.bind(this)
      }
      value = {
        this.state.multiValue
      }
      isSearchable = {
        false
      }
      placeholder = "eee" /
      >
      <
      Select
      // multi={this.state.multi}
      options = {
        this.state.options2
      }
      onChange = {
        this.handleOnChange2.bind(this)
      }
      value = {
        this.state.multiValue2
      }
      isSearchable = {
        false
      }
      placeholder = "eee" /
      >
      <
      /div>
    );
  }
}

ReactDOM.render( < ReactSelect / > , document.body);