基于使用MDB-reactjs选择第一个下拉列表的下拉列表

import React, { useState } from 'react';
import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from 'mdb-react-ui-kit';

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

  const handleSelect = (option) => {
    setSelectedOption(option);
  };

  return (
    <MDBDropdown>
      <MDBDropdownToggle caret color="primary">
        Select Option
      </MDBDropdownToggle>
      <MDBDropdownMenu>
        <MDBDropdownItem onClick={() => handleSelect('Option 1')}>Option 1</MDBDropdownItem>
        <MDBDropdownItem onClick={() => handleSelect('Option 2')}>Option 2</MDBDropdownItem>
        <MDBDropdownItem onClick={() => handleSelect('Option 3')}>Option 3</MDBDropdownItem>
      </MDBDropdownMenu>
    </MDBDropdown>
  );
};

export default DropdownExample;

import React, { useState, useEffect } from 'react';
import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from 'mdb-react-ui-kit';

const DropdownExample = () => {
  const [selectedOption, setSelectedOption] = useState('Option 1'); // 默认选择第一个选项

  const handleSelect = (option) => {
    setSelectedOption(option);
  };

  return (
    <MDBDropdown>
      <MDBDropdownToggle caret color="primary">
        {selectedOption}
      </MDBDropdownToggle>
      <MDBDropdownMenu>
        <MDBDropdownItem onClick={() => handleSelect('Option 1')}>Option 1</MDBDropdownItem>
        <MDBDropdownItem onClick={() => handleSelect('Option 2')}>Option 2</MDBDropdownItem>
        <MDBDropdownItem onClick={() => handleSelect('Option 3')}>Option 3</MDBDropdownItem>
      </MDBDropdownMenu>
    </MDBDropdown>
  );
};

export default DropdownExample;