如何在使用下拉列表小部件时返回函数值

npm install react react-dom

import React, { useState } from 'react';

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

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

  return (
    <div>
      <select value={selectedOption} onChange={handleOptionChange}>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
      <p>Selected option: {selectedOption}</p>
    </div>
  );
};

export default Dropdown;

import React from 'react';
import Dropdown from './Dropdown';

const App = () => {
  const handleOptionSelected = (selectedOption) => {
    console.log('Selected option:', selectedOption);
    // 在这里可以进行进一步的处理
  };

  return (
    <div>
      <h1>Dropdown Example</h1>
      <Dropdown onSelect={handleOptionSelected} />
    </div>
  );
};

export default App;