Блог

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

Я хочу, чтобы опция второго выбора менялась в соответствии со значением выбора первого выбора.
Это изменит параметры второго выбора, но не значение по умолчанию. (Если щелкнуть значение по умолчанию, которое не изменено, содержимое параметра изменится.) Если изменить значение по умолчанию на значение, первое значение выбора будет изменено, но выбор опции невозможен. Есть ли способ автоматически изменить значение по умолчанию второго выбора в зависимости от выбранного значения первого выбора?

Вы можете сделать это с value помощью . Но при использовании value Select теперь это контролируемый компонент. Теперь вы должны управлять value им самостоятельно onChange .

 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>
  );
}