Ant设计-如何在每次选择后自动关闭选择(“标签”或“多个”模式)下拉菜单？

Ant Design是一套基于React的UI组件库，提供了丰富的组件和样式，方便开发人员快速构建美观、高效的前端界面。

在Ant Design中，如果需要在每次选择后自动关闭选择下拉菜单，可以通过以下方式实现：

使用Select组件：Ant Design的Select组件提供了选择器的功能，可以通过设置mode属性为tags或multiple来实现标签选择或多选模式。同时，Select组件还提供了onSelect事件，可以在选择后执行相应的操作。

import { Select } from 'antd';

const { Option } = Select;

function handleChange(value) {
  // 执行选择后的操作
}

function App() {
  return (
    <Select
      mode="tags" // 或 mode="multiple"
      style={{ width: '100%' }}
      placeholder="请选择"
      onChange={handleChange}
    >
      <Option value="option1">选项1</Option>
      <Option value="option2">选项2</Option>
      <Option value="option3">选项3</Option>
    </Select>
  );
}

使用Menu组件：Ant Design的Menu组件提供了下拉菜单的功能，可以通过设置onClick事件来处理选择后的操作，并通过visible属性来控制下拉菜单的显示与隐藏。

import { Menu, Dropdown } from 'antd';

function handleMenuClick(e) {
  // 执行选择后的操作
}

const menu = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="option1">选项1</Menu.Item>
    <Menu.Item key="option2">选项2</Menu.Item>
    <Menu.Item key="option3">选项3</Menu.Item>
  </Menu>
);

function App() {
  return (
    <Dropdown overlay={menu} trigger={['click']}>
      <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
        请选择
      </a>
    </Dropdown>
  );
}

以上是两种常用的实现方式，根据具体需求选择适合的方式即可。在实际开发中，可以根据业务需求进行定制化的样式和功能调整。

关于Ant Design的更多信息和使用方法，可以参考腾讯云的Ant Design产品介绍页面：Ant Design产品介绍