Antd Select与Menu组合使用

最新推荐文章于 2024-09-14 09:02:11 发布

Sunny_swallow

最新推荐文章于 2024-09-14 09:02:11 发布

阅读量222

点赞数 1

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/Sunny_swallow/article/details/137682792

版权

文章描述了如何在AntDesign中创建一个自定义级联选择器组件，以满足最后一层根据配置显示不同状态的需求。作者提到中文输入法下hover触发的焦点问题以及select和menu组件状态同步的挑战，并提供了相应的解决方法。

摘要由CSDN通过智能技术生成

业务需求上需要实现一个类似于这样的组件

很像级联选择器Cascader的作用，但最后一层需要根据相应配置显示不同的状态，如下拉列表、输入框等，基本代码如下

import type { MenuProps } from 'antd'
import { Input, Menu, Select } from 'antd'
import React, { useState } from 'react'

const CustomCascader: React.FC = () => {
    const [open, SetOpen] = useState<boolean>(false)
    return (
        <Select
            open={open}
            onDropdownVisibleChange={(visible) => SetOpen(visible)} //由于select组件的下拉框与Menu弹出框并非一个组件，所以需要手动控制下拉框的打开状态
            style={{ width: '200px' }}
            dropdownRender={() => {
                return (
                    <Menu triggerSubMenuAction="click">
                        <Menu.Item>菜单项一</Menu.Item>
                        <Menu.Item>菜单项二</Menu.Item>
                        <Menu.SubMenu title="子菜单">
                            <Menu.Item>
                                {' '}
                                <Input />
                            </Menu.Item>
                        </Menu.SubMenu>
                        <Menu.SubMenu title="子菜单">
                            <Menu.SubMenu title="第二层">
                                <Menu.Item>
                                    {' '}
                                    <Input
                                        onClick={(e) => {
                                            e.stopPropagation() // 阻止冒泡，防止点击该元素触发父元素点击事件，Menu弹出框直接关闭
                                        }}
                                    />
                                </Menu.Item>
                            </Menu.SubMenu>
                        </Menu.SubMenu>
                        <Menu.SubMenu title="子菜单">
                            <Menu.SubMenu title="第三层">
                                <Menu.Item>1</Menu.Item>
                                <Menu.Item>2</Menu.Item>
                                <Menu.Item>3</Menu.Item>
                                <Menu.Item>4</Menu.Item>
                            </Menu.SubMenu>
                        </Menu.SubMenu>
                    </Menu>
                )
            }}
        />
    )
}

export default CustomCascader

以输入框为例，谈一下遇见的问题：

1.当triggerSubMenuAction为hover且输入时为中文输入法，中文字符选择框会使组件失焦，弹出框直接消失，这里需要把triggerSubMenuAction属性变为click可以解决该问题

2.由于select组件与menu本不是一个整体，所以第一层下拉框为select的open状态，第二三层为menu组件的open状态，容易出现这样的问题