如何使用Ant Design的Select/Dropdown组件构建强大的下拉菜单

2023-11-25 19:23:13

Ant Design的Select组件是一个强大而灵活的工具，可让您轻松创建各种下拉菜单。Dropdown组件还允许您创建具有自定义内容的下拉菜单，例如表单或日历。

为了开始使用Select组件，您需要先将其导入您的项目中：

import { Select } from 'antd';

然后，您可以在您的React组件中使用Select组件。以下是一个示例：

const App = () => {
  const options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Orange', value: 'orange' },
  ];

  return (
    <Select
      options={options}
      defaultValue="apple"
      style={{ width: 120 }}
    />
  );
};

export default App;

此示例将创建一个下拉菜单，其中包含三个选项：“Apple”、“Banana”和“Orange”。默认选定的选项是“Apple”。

您可以使用Dropdown组件创建具有自定义内容的下拉菜单。以下是一个示例：

const App = () => {
  const menu = (
    <Menu>
      <Menu.Item>Option 1</Menu.Item>
      <Menu.Item>Option 2</Menu.Item>
      <Menu.Item>Option 3</Menu.Item>
    </Menu>
  );

  return (
    <Dropdown overlay={menu}>
      <Button>Dropdown</Button>
    </Dropdown>
  );
};

export default App;