在React js中使用Reactstrap从多个选择下拉列表中动态选择选项

npm install reactstrap

import React from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

constructor(props) {
  super(props);
  this.state = {
    dropdownOpen: false,
    selectedOption: null,
    options: ['Option 1', 'Option 2', 'Option 3'] // 替换为实际的选项数组
  };
}

toggleDropdown = () => {
  this.setState(prevState => ({
    dropdownOpen: !prevState.dropdownOpen
  }));
}

selectOption = (option) => {
  this.setState({
    selectedOption: option
  });
}

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

  return (
    <Dropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>
      <DropdownToggle caret>
        {selectedOption || 'Select an option'}
      </DropdownToggle>
      <DropdownMenu>
        {options.map(option => (
          <DropdownItem key={option} onClick={() => this.selectOption(option)}>
            {option}
          </DropdownItem>
        ))}
      </DropdownMenu>
    </Dropdown>
  );
}