React-Select: как добавить две пользовательские кнопки рядом с параметром и выбрать, включить или исключить его? - PullRequest
Новая
       53

React-Select: как добавить две пользовательские кнопки рядом с параметром и выбрать, включить или исключить его?

0 голосов
/ 18 июня 2020

У меня баси c React-Select. Я хотел бы позволить пользователю добавлять или исключать опцию благодаря двум выделенным кнопкам, которые будут появляться рядом с каждой опцией при наведении курсора. Как только я включаю или исключаю вариант, он должен отображаться зеленым или красным где-нибудь на странице.

Я знаю, что вопрос немного сложный, но поскольку React-select - популярная библиотека, я думаю, некоторые из вас уже реализовали такую ​​функцию?

Вот мой код: 

const Component = ({
  options,
  onAsyncLoad,
  placeholder = "search"
}: IProps) => {
  const [query, setQuery] = useState("");
  const handleInputChange = newValue => {
    const inputValue = newValue.replace(/\W/g, "");
    setQuery(inputValue);
    return inputValue;
  };

  const loadOptions = (inputValue, callback) => {
    if (options) {
      return callback(
        options.filter(option => option.value.includes(query.toLowerCase()))
      );
    }
    return setTimeout(() => {
      callback(onAsyncLoad(inputValue));
    }, 300);
  };

  return (
    <AsyncSelect
      cacheOptions
      loadOptions={loadOptions}
      defaultOptions
      onInputChange={handleInputChange}
      components={{ DropdownIndicator: () => null }}
      styles={{}}
      placeholder={placeholder}
    />
  );
};
...