React+ant design 实现右键菜单 Tree 配合 Dropdown

原创已于 2022-07-12 08:51:06 修改 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react #前端 #reactjs

于 2021-06-25 16:51:22 首次发布

学习总结专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用React结合Ant Design的Tree组件与Dropdown组件来实现一个具有右键菜单功能的目录树。通过自定义目录树节点，使得每个节点都能响应右键点击事件并展示下拉菜单，提供查看和删除等操作。

React+ant design 实现右键菜单

需求：页面内部创建一个左侧目录树，并实现右键菜单功能经过对比，决定使用 Tree 创建目录树，Dropdown 实现菜单功能虽然 Tree 有 onRightClick 方法可以进行右键菜单的设置，但是右键之后的处理觉得麻烦

发现 Dropdown 也可以右键触发，于是想通过自定义Tree 目录树的节点进行实现，这样每一个节点都是一个通过右键触发的下拉菜单，于是便达到了简便右键菜单的功能

具体代码

import React from 'react'
const QueryPage: React.FC = () => {

		{/* 目录列表 */ }
		const [indexList, setIndexList] = useState<any>([])
		{/* 右键选中的项* /}
    const [indexRight, setIndexRight] = useState<any>()

		{/* 右键菜单 */}
		const indexMenu = (
        <Menu>
          <Menu.Item>查看</Menu.Item>
          <Menu.Item>删除</Menu.Item>
        </Menu>
    );

		{/* 目录树 */}
		const indexTreeNodeData = indexList?.map((i:any)=>{
        return {
            title: <Dropdown overlay={indexMenu} trigger={['contextMenu']} onVisibleChange={()=>{
                setIndexRight(i)
            }}>
                <div>{i?.name}</div>
            </Dropdown>,
            key: i,
        }
    });
		return <>
				<PageContainer header={{title:''}}>
					<ProCard>
							<Tree
			          checkable={true}
			          onCheck={onIndexCheck}
			          treeData={indexTreeNodeData}
			          />
					<ProCard>
				  {/* ...省略其它代码 */} 
				</PageContainer>
	</>
}
export default QueryPage;