javascript - react 选择下拉选项未正确存储

Question

我正在使用react-select下拉菜单允许用户在 A、B 和 C 之间选择多个选项。目前，这适用于 UI，但当取消选择某个选项时，它不会从数组中删除。谁能给我提示如何做到这一点？ (例如，A、B、C被选中，然后A未被选中，如何将A从数组中删除？)

var choice = [];
const choices = [
  { value: 'a', label: 'a' },
  { value: 'b', label: 'b' },
  { value: 'c', label: 'c' },
];          

handleChange = (selectedChoice) => {
  this.setState({ selectedChoice });
  for (var i = 0; i < selectedChoice.length; i++) {
    if (choice.indexOf(selectedChoice[i].value) == -1){
      choice.push(selectedChoice[i].value); 
    }
  }
}

然后，在代码中进一步调用 console.log(choice)，在单击按钮时进行打印。随后:

render(){
  return (
    <Div ClassName="box">
      <Select options={choices}
        isMulti
        value={this.state.selectedChoice}
        onChange={this.handleChange}
      />
    </Div>
  );
}

插入和弹出将不起作用，因为该选项可能位于中间。

Answer 1

您不需要另一个选择变量。您已经有了 selectedChoice 状态，它将为您存储所有选定的值。

工作解决方案:https://codesandbox.io/embed/0pr9yoo8l