在ReactJS中打开两个具有相同功能的下拉列表

import React, { useState } from 'react';

const Dropdown = () => {
  const [selectedOption, setSelectedOption] = useState('');
  const options = ['Option 1', 'Option 2', 'Option 3'];

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <select value={selectedOption} onChange={handleOptionChange}>
      <option value="">Select an option</option>
      {options.map((option) => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </select>
  );
};

const App = () => {
  return (
    <div>
      <h1>Dropdown 1</h1>
      <Dropdown />
      <h1>Dropdown 2</h1>
      <Dropdown />
    </div>
  );
};

export default App;