动态更改 React Select options 属性

Question

我有两个 select 通过 React Select 输入。我的第二个 select 的选项属性应该根据第一个反应 Select 中的值动态变化。最好的方法是什么？

我的第一个 select:

      <Select
        styles={colourStyles}
        className="basic-single"
        classNamePrefix="select"
        isClearable={isClearable}
        isSearchable={isSearchable}
        placeholder="Select service category"
        name="color"
        options={serviceCategoriesPrimary}
        onChange={(value) =>
          value !== null ? setSelectValue(value.value) : setSelectValue("")
        }
      />

我的第二个select:

      <Select
        styles={colourStyles}
        className="basic-single"
        classNamePrefix="select"
        isClearable={isClearable}
        isSearchable={isSearchable}
        isDisabled={selectValue === "" ? true : false}
        placeholder="Select secondary category"
        name="color"
        options={handleChooseOptions}
      />

  const handleChooseOptions = () => {
    if(selectValue === 'Health Care'){
      return options1
    }else{
      return options2
    }
  }

Answer 1

第一Select:

<Select
    styles={colourStyles}
    className="basic-single"
    classNamePrefix="select"
    isClearable={isClearable}
    isSearchable={isSearchable}
    placeholder="Select service category"
    name="color"
    options={serviceCategoriesPrimary}
    onChange={(value) =>
      value !== null ? setSelectValue(value.value) : setSelectValue("")
    }
  />

第二个Select:

<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}
  />

Answer 2

如果您的 optionsFunction 比您的示例显示的更复杂，我会记住那个 optionsFunction 的输出并将其作为道具传递给第二个 select。

每次 selectValue 更改时，optionsFunction 将重新运行。

当 optionsFunction 重新运行s 时，它将更新对 select2Options 的引用，重新呈现第二个 select.

const [selectValue, setSelectValue] = useState(null); 

const select2Options = useMemo(() => {
   if(selectValue === 'Health Care')
       return options1 // update pointer

   return options2 // update pointer
}, [selectValue]) // rerun function in useMemo on selectValue changes

return (
<>
    <Select
        {/*  will change the dependency of useMemo, re-running the `optionsFunction`, and updating the reference of `select2Options` if necessary */}
        onChange={value => setSelectValue(value)} 
    ></Select>
    <Select options={select2Options}></Select>
</>
)

动态更改 React Select options 属性

Changing React Select options prop dynamically

reactjs

react-select