React Select tag:第二个选择标签选项值取决于第一个选择标签选定值

import React, { useState } from 'react';
import Select from 'react-select';

const options1 = [
  { value: 'option1', label: '选项1' },
  { value: 'option2', label: '选项2' },
  { value: 'option3', label: '选项3' }
];

const options2 = {
  option1: [
    { value: 'suboption1', label: '子选项1' },
    { value: 'suboption2', label: '子选项2' }
  ],
  option2: [
    { value: 'suboption3', label: '子选项3' },
    { value: 'suboption4', label: '子选项4' }
  ],
  option3: [
    { value: 'suboption5', label: '子选项5' },
    { value: 'suboption6', label: '子选项6' }
  ]
};

const App = () => {
  const [selectedOption1, setSelectedOption1] = useState(null);
  const [selectedOption2, setSelectedOption2] = useState(null);

  const handleOption1Change = (selectedOption) => {
    setSelectedOption1(selectedOption);
    setSelectedOption2(null);
  };

  const handleOption2Change = (selectedOption) => {
    setSelectedOption2(selectedOption);
  };

  const getOptionsForOption2 = () => {
    if (selectedOption1) {
      return options2[selectedOption1.value];
    } else {
      return [];
    }
  };

  return (
    <div>
      <Select
        options={options1}
        value={selectedOption1}
        onChange={handleOption1Change}
      />
      <Select
        options={getOptionsForOption2()}
        value={selectedOption2}
        onChange={handleOption2Change}
      />
    </div>
  );
};

export default App;