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

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

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/>
))

I want is after test2 is selected, I want the other two drop downs to show test1, and 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"}]

And then replacing options property as x.

过滤器正在工作,但是,

enter image description here

enter image description here

占位符未更新所选值。

我要实现的目标:

enter image description here

And for the next drop down [1], be only able to select those which aren't selected:

enter image description here

评论