#reactjs #react-select
#реагирует на #реагировать-выбрать
Вопрос:
У меня есть два входа выбора через React Select. Параметры моего второго выбора должны динамически изменяться в зависимости от значения в первом выборе реакции. Каков наилучший способ сделать это?
мой первый выбор:
lt;Select styles={colourStyles} className="basic-single" classNamePrefix="select" isClearable={isClearable} isSearchable={isSearchable} placeholder="Select service category" name="color" options={serviceCategoriesPrimary} onChange={(value) =gt; value !== null ? setSelectValue(value.value) : setSelectValue("") } /gt;
мой второй выбор:
lt;Select styles={colourStyles} className="basic-single" classNamePrefix="select" isClearable={isClearable} isSearchable={isSearchable} isDisabled={selectValue === "" ? true : false} placeholder="Select secondary category" name="color" options={handleChooseOptions} /gt;
const handleChooseOptions = () =gt; { if(selectValue === 'Health Care'){ return options1 }else{ return options2 } }
Ответ №1:
Если у вас optionsFunction
все сложнее, чем показано в вашем примере, я бы запомнил результат этого optionsFunction
и передал его в качестве опоры для второго выбора.
Он optionsFunction
будет перезапускаться каждый раз selectValue
при внесении изменений.
При optionsFunction
повторном запуске он обновит ссылку на select2Options, повторно отобразив второй выбор.
const [selectValue, setSelectValue] = useState(null); const select2Options = useMemo(() =gt; { if(selectValue === 'Health Care') return options1 // update pointer return options2 // update pointer }, [selectValue]) // rerun function in useMemo on selectValue changes return ( lt;gt; lt;Select {/* will change the dependency of useMemo, re-running the `optionsFunction`, and updating the reference of `select2Options` if necessary */} onChange={value =gt; setSelectValue(value)} gt;lt;/Selectgt; lt;Select options={select2Options}gt;lt;/Selectgt; lt;/gt; )
Комментарии:
1. Отлично работает. Спасибо!
2. @Беншехтман рад слышать, не забудьте отметить вопрос как отвеченный ^^
Ответ №2:
сначала выберите:
lt;Select styles={colourStyles} className="basic-single" classNamePrefix="select" isClearable={isClearable} isSearchable={isSearchable} placeholder="Select service category" name="color" options={serviceCategoriesPrimary} onChange={(value) =gt; value !== null ? setSelectValue(value.value) : setSelectValue("") } /gt;
Второй Выбор:
lt;Select styles={colourStyles} className="basic-single" classNamePrefix="select" isClearable={isClearable} isSearchable={isSearchable} isDisabled={selectValue === "" ? true : false} placeholder="Select secondary category" name="color" options={selectValue === 'Health Care' ? options1 : options2} /gt;