React-select 用户选择后如何清除选项答案

【问题标题】：React-select How to clear options once user selectedReact-select 用户选择后如何清除选项
【发布时间】：2020-06-22 06:53:07
【问题描述】：

我正在使用 react-select 向用户显示选项的下拉列表。如果选择了特定选项，我希望它，所有其他选项都会消失。

例如，如果选择了“全部”选项，我希望所有其他选项都消失：

据我所见，react-select 保持未选中选项的状态。这可以通过传递给 react-select 组件的一些道具来控制吗？

【问题讨论】：

是的，可以。还有，你实现了哪些代码？
@keikai 请把它写下来作为答案，可能有一些代码，我会接受它

标签： javascript html reactjs jsx react-select

【解决方案1】：

可以在handler中编写相关流程，如果选择all，则将option data改为all项即可。如果选择被清除，恢复原来的option data。

import React from "react";
import "./styles.css";
import Select from "react-select";

const data = [
  { value: "1", label: "1" },
  { value: "2", label: "2" },
  { value: "3", label: "3" },
  { value: "4", label: "all" }
];
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedLabel: "",
      selectedLabelList: []
    };
  }
  singleHandler = e => {
    this.setState({ selectedLabel: e ? e.label : "" });
  };
  multiHandler = e => {
    this.setState({
      selectedLabelList: e && e.length > 0 ? e.map(x => x.label) : []
    });
  };
  render() {
    const { selectedLabel, selectedLabelList } = this.state;
    const subListWithAll = data.filter(x => x.label === "all");
    const singleOptions = selectedLabel === "all" ? subListWithAll : data;
    const multiOptions = selectedLabelList.includes("all")
      ? subListWithAll
      : data;
    return (
      <>
        <div>
          <Select
            id="single"
            isClearable={true}
            value={singleOptions.filter(x => x.label === selectedLabel)}
            options={singleOptions}
            onChange={this.singleHandler}
          />
        </div>
        <div>
          <Select
            id="multi"
            isMulti
            isClearable={true}
            value={multiOptions.filter(x =>
              selectedLabelList.includes(x.label)
            )}
            options={multiOptions}
            onChange={this.multiHandler}
          />
        </div>
      </>
    );
  }
}

在线试用：

【讨论】：