Сбросить значение SELECT для компонента ShadCN/UI <Select>
У меня есть страница с несколькими раскрывающимися списками <Select>, и они зависят друг от друга. Моя проблема в том, что когда я меняю заменяющий выбор, те, которые зависят от него, не сбрасываются.
образец кода:
<Select
onvaluechange = {value=>setvalues(values=>{...values, make: value, sku:undefined, model:undefined})}
value=values.make
>
<SelectTrigger>
<SelectValue placeholder = "manufacturer" />
</SelectTrigger>
<SelectContent>
{loop to fill <SelectItem>item</SelectItem> dynamically based on a DB list}
</SelectContent>
</Select>
<Select
onvaluechange = {value=>setvalues(values=>{...values, model: value, sku:undefined})}
value=values.model
>
<SelectTrigger>
<SelectValue placeholder = "model" />
</SelectTrigger>
<SelectContent>
{loop to fill <SelectItem> dynamically based on a DB list}
</SelectContent>
</Select>
<Select
onvaluechange = {value=>setvalues(values=>{...values, sku: value})}
value=values.sku
>
<SelectTrigger>
<SelectValue placeholder = "sku" />
</SelectTrigger>
<SelectContent>
{loop to fill <SelectItem> dynamically based on a DB list}
</SelectContent>
</Select>
Проблема в том, что выбор производителя или модели не приводит к сбросу настроек. Я также не создаю дополнительный объект State для каждого зависимого списка и не вызываю setState, т. е. setSku(undefined). Похоже, что у Select нет атрибута id, поэтому я не могу вручную сбросить его, найдя его вручную ни в document. Я ломаю голову над этим с понедельника и буду очень признателен за любую оказанную помощь.
Обновление: поэтому я использовал <SelectValue>{state}</SelectValue> внутри SelectTrigger, чтобы изменить отображаемое значение. Моя новая проблема, однако, заключается в том, что, несмотря на это, значение остается выбранным, поэтому, если бы я переключился на производителя с моделью с аналогичными именами, я не смог бы продолжить, поскольку модель «выбирается автоматически» (проблема здесь в том, что я использую скрытый для захвата значения и входные данные действительно учитывают изменения состояния). Я бы хотел, чтобы весь выбор очистился.
Я прочитал этот вопрос , этот вопрос и этот вопрос, и ни один из них, похоже, не выполнил за меня работу.
Я сделал, собираюсь добавить ответ в обновление
Ответы 1
Мне удалось решить эту проблему, не используя объект values и вместо этого создав отдельные объекты состояния для каждого Select.
После этого я устанавливаю для каждого состояния строку или неопределенное значение, а в реквизитах value каждого Select устанавливаю значение либо значения состояния, либо пустой строки ''. Наконец, чтобы гарантировать, что «зависимость» Select обновляет своих «дочерних элементов», я установил в зависимости onValueChanged() состояние неопределенное.
Окончательный код:
<Select
onvalueChange = {
setMake(value)
setSku(undefined)
}
value = {make ||''}
>
<SelectTrigger>
<SelectValue placeholder = "manufacturer" >
{make || "manufacturer"}
</SelectValue >
</SelectTrigger>
<SelectContent>
{loop to fill <SelectItem>item</SelectItem> dynamically based on a DB list}
</SelectContent>
</Select>
<Select
onvalueChange = {
setSku(value)
}
value = {sku ||''}
>
<SelectTrigger>
<SelectValue placeholder = "model" >
{sku || "model"}
</SelectValue >
</SelectTrigger>
<SelectContent>
{loop to fill <SelectItem>item</SelectItem> dynamically based on a DB list}
</SelectContent>
</Select>
Если это не сработает, попробуйте установить для дочерних значений неопределенное значение в useEffect. то есть
useEffect(()=>{
setSku(undefined)
},[make]);
удалось ли вам решить, можете ли вы создать минимальный воспроизводимый пример. возможно, используя stackblitz