如何在React中创建带有描述的下拉列表

import React, { Component } from 'react';

class DropdownList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        { value: 'option1', description: 'Option 1' },
        { value: 'option2', description: 'Option 2' },
        { value: 'option3', description: 'Option 3' }
      ],
      selectedOption: ''
    };
  }

  handleOptionChange = (event) => {
    this.setState({ selectedOption: event.target.value });
  }

  render() {
    return (
      <select value={this.state.selectedOption} onChange={this.handleOptionChange}>
        {this.state.options.map(option => (
          <option key={option.value} value={option.value}>{option.description}</option>
        ))}
      </select>
    );
  }
}

export default DropdownList;