#javascript #reactjs #react-select
#javascript #reactjs #реагировать-выбрать
Вопрос:
Я использую react-select и хочу очистить выбранное значение при нажатии кнопки, не добавляя его в options свойство
Я пробовал
- Использование state для управления свойством options , но, по-видимому, при вызове
clearValue()метода, автоматически переходит к массиву options по умолчанию.
Проблема
Как мне указать react-select , чтобы просто очистить выбранные значения и нигде не добавлять их в массив параметров?
import React, { useRef } from "react";
import Select from "react-select";
export default function App() {
const selectInputRef = useRef();
const onClear = () => {
selectInputRef.current.select.clearValue();
};
return (
<div className="App">
<h1>Select Gender</h1>
<Select
isMulti
ref={selectInputRef}
options={[
{ value: "male", label: "Male" },
{ value: "female", label: "Female" }
]}
/>
<button onClick={onClear}>Clear Value</button>
</div>
);
}
Вот моя ссылка на CodeSandbox
Комментарии:
1. Другими словами: вы хотите удалить текущее выбранное значение из параметров все вместе?
2. @trixn да, это то, что я хочу .. в идеале это должен быть вызов функции.. так что, например, я могу удалить эти параметры при сохранении
3. В этом случае вам нужно управлять параметрами в состоянии компонента и удалять их при нажатии кнопки.
4. @trixn Я не хочу
react-selectизменять поведение по умолчанию при повторном добавлении элементов.. я просто хочу сделать это в определенное время, т.е. onButtonClick5. @trixn Я уже пробовал это в prod версии кода .. это не работает .. react-select автоматически добавляет их .. я был бы признателен, если бы вы мне помогли: (
Ответ №1:
Вам необходимо самостоятельно управлять состоянием выбранных значений и параметров и соответствующим образом управлять ими:
export default function App() {
const [selected, setSelected] = useState([]);
const [options, setOptions] = useState([
{ value: "male", label: "Male" },
{ value: "female", label: "Female" }
]);
const handleClear = () => {
setOptions((currentOptions) => currentOptions.filter((currentOption) => !selected.includes(currentOption)));
setSelected([]);
};
return (
<div className="App">
<h1>Select Gender</h1>
<Select isMulti value={selected} options={options} onChange={setSelected} />
<button onClick={handleClear}>Clear Value</button>
</div>
);
}
