React-select Как очистить параметры после выбора пользователя

Question

Я использую реагирование на выбор, чтобы предоставить пользователю раскрывающийся список опций. Хотелось бы, чтобы была выбрана опция c, все остальные опции исчезли бы.

Например, если выбрана опция «ВСЕ», я бы хотел, чтобы все остальные опции исчезли:

Насколько я вижу, реагировать select поддерживает состояние невыбранных опций. Можно ли управлять этим с помощью некоторого пропеллера, переданного компоненту реагировать на выбор?

Answer 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>
      </>
    );
  }
}

Попробуйте онлайн: