使用React JS上的funcion根据第一个下拉选择填充下拉列表

import React, { useState } from 'react';

const Dropdown = () => {
  const [selectedOption, setSelectedOption] = useState('');
  const [options, setOptions] = useState([]);

  const handleSelectChange = (event) => {
    const selectedValue = event.target.value;
    setSelectedOption(selectedValue);

    // 根据选择的值填充下拉列表
    if (selectedValue === 'option1') {
      setOptions(['Option A', 'Option B', 'Option C']);
    } else if (selectedValue === 'option2') {
      setOptions(['Option X', 'Option Y', 'Option Z']);
    } else {
      setOptions([]);
    }
  };

  return (
    <div>
      <select value={selectedOption} onChange={handleSelectChange}>
        <option value="">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
      </select>
      <br />
      <select>
        {options.map((option, index) => (
          <option key={index} value={option}>{option}</option>
        ))}
      </select>
    </div>
  );
};

export default Dropdown;