Блог

У меня есть два входа выбора через 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  }  }  

Если у вас 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; )  

сначала выберите:

 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;