如何在一个只有一个函数的React应用程序中处理多个选择下拉列表？

import React, { useState } from 'react';

function DropdownForm() {
  const [option1, setOption1] = useState('');
  const [option2, setOption2] = useState('');
  const [option3, setOption3] = useState('');

  const handleOption1Change = (event) => {
    setOption1(event.target.value);
  };

  const handleOption2Change = (event) => {
    setOption2(event.target.value);
  };

  const handleOption3Change = (event) => {
    setOption3(event.target.value);
  };

  const handleSubmit = () => {
    // 处理用户提交选择的逻辑
    // 根据每个下拉列表的选中值执行相应的操作
    if (option1 === 'A') {
      // 执行操作A
    } else if (option1 === 'B') {
      // 执行操作B
    }

    if (option2 === 'X') {
      // 执行操作X
    } else if (option2 === 'Y') {
      // 执行操作Y
    }

    // ...
  };

  return (
    <div>
      <select value={option1} onChange={handleOption1Change}>
        <option value="">请选择</option>
        <option value="A">选项A</option>
        <option value="B">选项B</option>
      </select>

      <select value={option2} onChange={handleOption2Change}>
        <option value="">请选择</option>
        <option value="X">选项X</option>
        <option value="Y">选项Y</option>
      </select>

      <select value={option3} onChange={handleOption3Change}>
        <option value="">请选择</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
      </select>

      <button onClick={handleSubmit}>提交</button>
    </div>
  );
}

export default DropdownForm;