react原生动态添加数据到选取器

import React, { Component } from 'react';

class DynamicSelector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: ['Option 1', 'Option 2', 'Option 3'],
      newOption: ''
    };
  }

  handleInputChange = (event) => {
    this.setState({ newOption: event.target.value });
  }

  handleAddOption = () => {
    const { options, newOption } = this.state;
    if (newOption.trim() !== '') {
      const updatedOptions = [...options, newOption];
      this.setState({ options: updatedOptions, newOption: '' });
    }
  }

  render() {
    const { options, newOption } = this.state;

    return (
      <div>
        <select>
          {options.map((option, index) => (
            <option key={index}>{option}</option>
          ))}
        </select>
        <input type="text" value={newOption} onChange={this.handleInputChange} />
        <button onClick={this.handleAddOption}>Add Option</button>
      </div>
    );
  }
}

export default DynamicSelector;