React-select How to clear options once user selected

问题

I'm using react-select to present the user with a dropdown list of options. I would like it if a specific option is chosen, all other options will disappear.

For example, if the "ALL" option is selected, I would like all other options to disappear:

As far as I saw, react-select maintains the state of the non-selected options. Can this be controlled via some prop passed to the react-select component?

回答1:

You can write related processes in handler, if all is selected, change the option data to the item all only. If selection cleared, restore the original 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>
      </>
    );
  }
}

Try it online:

来源：https://stackoverflow.com/questions/60616545/react-select-how-to-clear-options-once-user-selected

标签

javascript

html

reactjs

jsx

react-select