如何使用 React-Select 分阶段控制选择框的 defaultValue？答案

【问题标题】：How can I control the defaultValue of the select box by stage using React-Select?如何使用 React-Select 分阶段控制选择框的 defaultValue？
【发布时间】：2021-10-07 11:22:39
【问题描述】：

let params = {
    "grade" : 1,
    "time" : 1,
}


function Calculator () {

    const options1 = [
        { value: 1, label:'example01'},
        { value: 2, label:'example02'},
    ]

    const options2_1 = [
        { value: 1, label:'example01-1'},
        { value: 2, label:'example01-2'}
    ]
    
    const options2_2 = [
        { value: 1, label:'example02-1'},
        { value: 2, label:'example02-2'}
    ]

    const [timeOption, setTimeOption] = useState(options2_1)

    function changeOption(data, info) {
        let selectName = info.name
        let selectValue = data.value
        if (selectValue === 1) {
            setTimeOption(options2_1)
        }
        else if (selectValue === 2) {
            setTimeOption(options2_2)
        }


return (<div>
 <div className="select_wrap">
      <Select options={options1} className='calc' defaultValue={options1[0]} classNamePrefix='calc' isSearchable={ false } name={"grade"}  onChange={changeOption}/>
      <Select options={timeOption} className='calc' defaultValue={options2_1[0]} classNamePrefix='calc' isSearchable={ false } name={"time"}  />
</div>
</div>)}

我希望第二个选择的选项根据第一个选择的选择值而改变。这将更改第二个选择的选项，但不会更改默认值。（如果单击未更改的defaultValue，则选项内容发生更改。）如果将defaultValue更改为value，则更改第一个选择值，但无法选择选项。有没有办法让第二次选择的默认值根据第一次选择的选择值自动改变？

【问题讨论】：

标签： reactjs react-select

【解决方案1】：

您可以使用value 执行此操作。但是，在使用value 时，Select 现在是controlled component。您现在必须使用自己的onChange 控制value。

import { useState } from "react";
import Select from "react-select";

let params = {
  grade: 1,
  time: 1
};

const options1 = [
  { value: 1, label: "example01" },
  { value: 2, label: "example02" }
];

const options2_1 = [
  { value: 1, label: "example01-1" },
  { value: 2, label: "example01-2" }
];

const options2_2 = [
  { value: 1, label: "example02-1" },
  { value: 2, label: "example02-2" }
];

export default function Calculator() {
  const [timeOptions, setTimeOptions] = useState(options2_1);
  const [timeValue, setTimeValue] = useState(options2_1[0]);

  function changeTimeOptions({ value }) {
    const options = value === 1 ? options2_1 : options2_2;
    setTimeOptions(options);
    setTimeValue(options[0]);
  }

  function changeTimeValue(option) {
    setTimeValue(option);
  }

  return (
    <div>
      <div className="select_wrap">
        <Select
          options={options1}
          className="calc"
          defaultValue={options1[0]}
          classNamePrefix="calc"
          isSearchable={false}
          name="grade"
          onChange={changeTimeOptions}
        />
        <Select
          options={timeOptions}
          className="calc"
          classNamePrefix="calc"
          isSearchable={false}
          value={timeValue}
          onChange={changeTimeValue}
          name="time"
        />
      </div>
    </div>
  );
}

【讨论】：