Tree组件增加右键菜单 #5151

bf185003 · 2017-03-03T03:29:05Z

tree组件需要有右键上下文菜单，经常需要在某个节点上进行操作。
现在tree没有这个属性

yesmeck · 2017-03-03T03:36:52Z

See ~~http://react-component.github.io/tree/examples/contextmenu.html~~

https://tree-react-component.vercel.app/demo/contextmenu

bf185003 · 2017-03-06T10:43:57Z

这个例子给我没用，我是用antD的。

yesmeck · 2017-03-06T11:05:55Z

antd 的组件都是基于 react-component 封装的，Tree 的 API 是一致的，上面的例子可以直接参考。

jcy2004x · 2017-03-31T03:45:49Z

我实现了，看下关键的几行代码就明白了

<Tree onRightClick={this.treeNodeonRightClick} >

// 实现这个方法 treeNodeonRightClick

treeNodeonRightClick(e) {
        this.setState({
            rightClickNodeTreeItem: {
                pageX: e.event.pageX,
                pageY: e.event.pageY,
                id: e.node.props['data-key'],
                categoryName: e.node.props['data-title']
            }
        });
    }

// id 和 categoryName 是生成时绑上去的

<TreeNode
                        key={item.id}
                        title={title}
                        data-key={item.id}
                        data-title={item.categoryName}
                    />);

// 最后绑个菜单就可以实现了

getNodeTreeRightClickMenu() {
        const {pageX, pageY} = {...this.state.rightClickNodeTreeItem};
        const tmpStyle = {
            position: 'absolute',
            left: `${pageX - 220}px`,
            top: `${pageY - 70}px`
        };
        const menu = (
            <Menu
                onClick={this.handleMenuClick}
                style={tmpStyle}
                className={style.categs_tree_rightmenu}
            >
                <Menu.Item key='1'><Icon type='plus-circle'/>{'加同级'}</Menu.Item>
                <Menu.Item key='2'><Icon type='plus-circle-o'/>{'加下级'}</Menu.Item>
                <Menu.Item key='4'><Icon type='edit'/>{'修改'}</Menu.Item>
                <Menu.Item key='3'><Icon type='minus-circle-o'/>{'删除目录'}</Menu.Item>
            </Menu>
        );
        return (this.state.rightClickNodeTreeItem == null) ? '' : menu;
    }

chj-damon · 2017-04-06T11:30:48Z

@jcy2004x 请问您定义的这个getNodeTreeRightClickMenu方法是在哪里调用的？

jcy2004x · 2017-04-10T01:06:29Z

@chj-damon
getNodeTreeRightClickMenu方法是放在生成主界面的方法里（ render ），因为每一次state的变化后，render方法都会执行，所以变一下任意的this.state里面的状态，就会执行render方法，这样getNodeTreeRightClickMenu方法放在render方法里来生成界面的一部分。就可以了

TengFeiHao · 2017-12-13T16:58:44Z

可以写明白点吗？调用getNodeTreeRightClickMenu函数后那个 menu 怎么显示到页面上？

lemonnoodle · 2017-12-14T00:52:44Z

@TengFeiHao 根据@jcy2004x 的方法弄的，可以参考下https://github.com/lemonnoodle/react-mobx-dashboard/blob/master/src/components/ios/Create.jsx

itskaiway · 2018-09-10T09:19:44Z

上面的方法可行，不过里面有个获取位置的方法建议用e.event.currentTarget.getBoundingClientRect()方法，目前直接用e.event.pageX以及e.event.pageY感觉有偏移。

个人写法

onRightClick = (e) => {
    const positionInfo = e.event.currentTarget.getBoundingClientRect();
    const x = positionInfo.right;
    const y = positionInfo.bottom;
    this.setState({
      NodeTreeItem: {
        pageX: x,
        pageY: y,
        parentKey: e.node.props.dataRef.parentKey,
        id: e.node.props.eventKey,
      },
    });
  };

dargonpaul · 2018-09-21T00:22:53Z

可以不用自己写，也不用antd的tree的右键事件属性，antd官方推荐了两个优秀的右键菜单组件，我只用了其中一个https://github.com/fkhadra/react-contexify
tree的子节点组件是TreeNode ，它有一个title属性是用来传递每个节点显示的给用户看到内容的，可以在这里，把右键菜单的组件ContextMenuProvider包进去，关键代码如下：

import { ContextMenu, Item, Separator, Submenu, ContextMenuProvider } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.min.css';
const onContextMenuClick = ({ event, ref, data, dataFromProvider }) => console.log(ref.dataset.key);
        // create your menu first
        const MyAwesomeMenu = () => (
            <ContextMenu id='menu_id'>
              <Item onClick={onContextMenuClick}>Lorem</Item>
              <Item onClick={onContextMenuClick}>Ipsum</Item>
              <Separator />
              <Item disabled>Dolor</Item>
              <Separator />
              <Submenu label="Foobar">
                <Item onClick={onContextMenuClick}>Foo</Item>
                <Item onClick={onContextMenuClick}>Bar</Item>
              </Submenu>
            </ContextMenu>
        );
const title = (<ContextMenuProvider id='menu_id'  data-key={item.key}><span>{item.title}</span></ContextMenuProvider>);

<Tree>
  <TreeNode key={item.key} title={title}></TreeNode>
</Tree>

guirenpei · 2019-01-05T10:04:33Z

@dargonpaul
只要一用ContextMenu就报错，有什么好的解决办法吗

Element type is invalid: expected a string (for built-in components) or
a class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.

Check the render method of `CContextMenu`.

itsXX · 2019-03-18T06:50:53Z

@guirenpei 用Menu替换ContextMenu就可以

guirenpei · 2019-03-19T07:30:01Z

@guirenpei 用Menu替换ContextMenu就可以

ok, thx

ChinaShrimp · 2020-03-25T15:06:26Z

import React from 'react';

import { Tree } from 'antd';
import { Menu, Item, MenuProvider } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.min.css';

// contextMenu: { menuId, items: { name, handler }} 上下文菜单
// dataSource: 树节点
const TreeWithContextMenu = ({ dataSource, contextMenu }) => {
  // 上下文菜单
  const ContextMenu = () => (
    <Menu id={contextMenu.menuId}>
      {contextMenu.items.map(item => (
        <Item onClick={item.handler}>{item.name}</Item>
      ))}
    </Menu>
  );

  // 渲染树节点，主要目的是为了通过react-contexify包裹上下文菜单
  const renderEntityTreeNodes = data => {
    return data.map(item => {
      const title = (
        <MenuProvider id={contextMenu.menuId} data-key={item.key}>
          <span>{item.title}</span>
        </MenuProvider>
      );

      if (item.children) {
        const result = (
          <Tree.TreeNode {...item} key={item.key} title={title}>
            {renderEntityTreeNodes(item.children)}
          </Tree.TreeNode>
        );

        return result;
      }

      return <Tree.TreeNode {...item} key={item.key} title={title} />;
    });
  };

  return (
    <div>
      <Tree defaultExpandedKeys={['0-0-0']}>{renderEntityTreeNodes(dataSource)}</Tree>
      <ContextMenu />
    </div>
  );
};

export default TreeWithContextMenu;

In case有人需要，贴个完整版的组件。

truewq · 2020-05-10T11:45:16Z

我实现了，看下关键的几行代码就明白了

<Tree onRightClick={this.treeNodeonRightClick} >

// 实现这个方法 treeNodeonRightClick

treeNodeonRightClick(e) {
        this.setState({
            rightClickNodeTreeItem: {
                pageX: e.event.pageX,
                pageY: e.event.pageY,
                id: e.node.props['data-key'],
                categoryName: e.node.props['data-title']
            }
        });
    }

// id 和 categoryName 是生成时绑上去的

<TreeNode
                        key={item.id}
                        title={title}
                        data-key={item.id}
                        data-title={item.categoryName}
                    />);

// 最后绑个菜单就可以实现了

getNodeTreeRightClickMenu() {
        const {pageX, pageY} = {...this.state.rightClickNodeTreeItem};
        const tmpStyle = {
            position: 'absolute',
            left: `${pageX - 220}px`,
            top: `${pageY - 70}px`
        };
        const menu = (
            <Menu
                onClick={this.handleMenuClick}
                style={tmpStyle}
                className={style.categs_tree_rightmenu}
            >
                <Menu.Item key='1'><Icon type='plus-circle'/>{'加同级'}</Menu.Item>
                <Menu.Item key='2'><Icon type='plus-circle-o'/>{'加下级'}</Menu.Item>
                <Menu.Item key='4'><Icon type='edit'/>{'修改'}</Menu.Item>
                <Menu.Item key='3'><Icon type='minus-circle-o'/>{'删除目录'}</Menu.Item>
            </Menu>
        );
        return (this.state.rightClickNodeTreeItem == null) ? '' : menu;
    }

菜单是弹出来了，但是位置始终不对。

truewq · 2020-05-11T02:18:47Z

import React from 'react';

import { Tree } from 'antd';
import { Menu, Item, MenuProvider } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.min.css';

// contextMenu: { menuId, items: { name, handler }} 上下文菜单
// dataSource: 树节点
const TreeWithContextMenu = ({ dataSource, contextMenu }) => {
  // 上下文菜单
  const ContextMenu = () => (
    <Menu id={contextMenu.menuId}>
      {contextMenu.items.map(item => (
        <Item onClick={item.handler}>{item.name}</Item>
      ))}
    </Menu>
  );

  // 渲染树节点，主要目的是为了通过react-contexify包裹上下文菜单
  const renderEntityTreeNodes = data => {
    return data.map(item => {
      const title = (
        <MenuProvider id={contextMenu.menuId} data-key={item.key}>
          <span>{item.title}</span>
        </MenuProvider>
      );

      if (item.children) {
        const result = (
          <Tree.TreeNode {...item} key={item.key} title={title}>
            {renderEntityTreeNodes(item.children)}
          </Tree.TreeNode>
        );

        return result;
      }

      return <Tree.TreeNode {...item} key={item.key} title={title} />;
    });
  };

  return (
    <div>
      <Tree defaultExpandedKeys={['0-0-0']}>{renderEntityTreeNodes(dataSource)}</Tree>
      <ContextMenu />
    </div>
  );
};

export default TreeWithContextMenu;

In case有人需要，贴个完整版的组件。

还是你这个方案好，上面直接用onRightClick鼠标位置都不正确。不过数据结构应该是个数组吧
// contextMenu: { menuId, items: [{ name, handler }]} 上下文菜单
感谢感谢

daixianceng · 2020-06-19T06:47:43Z

    <a-dropdown :trigger="['contextmenu']">
      <a-tree>
      </a-tree>
      <a-menu slot="overlay">
        <a-menu-item key="1">1st menu item</a-menu-item>
        <a-menu-item key="2">2nd menu item</a-menu-item>
        <a-menu-item key="3">3rd menu item</a-menu-item>
      </a-menu>
    </a-dropdown>

ShawLyon · 2020-08-06T11:22:38Z

import React from 'react';

import { Tree } from 'antd';
import { Menu, Item, MenuProvider } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.min.css';

// contextMenu: { menuId, items: { name, handler }} 上下文菜单
// dataSource: 树节点
const TreeWithContextMenu = ({ dataSource, contextMenu }) => {
  // 上下文菜单
  const ContextMenu = () => (
    <Menu id={contextMenu.menuId}>
      {contextMenu.items.map(item => (
        <Item onClick={item.handler}>{item.name}</Item>
      ))}
    </Menu>
  );

  // 渲染树节点，主要目的是为了通过react-contexify包裹上下文菜单
  const renderEntityTreeNodes = data => {
    return data.map(item => {
      const title = (
        <MenuProvider id={contextMenu.menuId} data-key={item.key}>
          <span>{item.title}</span>
        </MenuProvider>
      );

      if (item.children) {
        const result = (
          <Tree.TreeNode {...item} key={item.key} title={title}>
            {renderEntityTreeNodes(item.children)}
          </Tree.TreeNode>
        );

        return result;
      }

      return <Tree.TreeNode {...item} key={item.key} title={title} />;
    });
  };

  return (
    <div>
      <Tree defaultExpandedKeys={['0-0-0']}>{renderEntityTreeNodes(dataSource)}</Tree>
      <ContextMenu />
    </div>
  );
};

export default TreeWithContextMenu;

In case有人需要，贴个完整版的组件。

这行改成 <MenuProvider id={contextMenu.menuId} data={item}>，不然有坑

PeiHaigang · 2020-10-13T07:01:23Z

Now you don't need react-contexify any more. Use antd Dropdown component is better, you still need to custom the title of the tree node, then use Dropdown to wrapper it, like below:
<Dropdown overlay={treeMenu} trigger={['contextMenu']}> <span>{${item.title}}</span> </Dropdown>
treeMenu like this:
const treeMenu = ( <Menu> <Menu.Item key="1">1st menu item</Menu.Item> <Menu.Item key="2">2nd menu item</Menu.Item> <Menu.Item key="3">3rd menu item</Menu.Item> </Menu> );

nanslee · 2021-05-26T06:17:29Z

上面的方法可行，不过里面有个获取位置的方法建议用e.event.currentTarget.getBoundingClientRect()方法，目前直接用e.event.pageX以及e.event.pageY感觉有偏移。

个人写法
onRightClick = (e) => {
    const positionInfo = e.event.currentTarget.getBoundingClientRect();
    const x = positionInfo.right;
    const y = positionInfo.bottom;
    this.setState({
      NodeTreeItem: {
        pageX: x,
        pageY: y,
        parentKey: e.node.props.dataRef.parentKey,
        id: e.node.props.eventKey,
      },
    });
  };

如果这个菜单在一个滚动容器内，点击坐标怎么获取呢

nickrogit · 2021-12-21T02:07:21Z

ContextMenuProvi

MenuProvider

react-contexify哪个版本?，react-contexify 5.0.0没有这个MenuProvider呀。

nickrogit · 2021-12-21T02:20:19Z

MenuProvider

什么版本？没有MenuProvider

ityoung · 2022-01-20T11:42:02Z

Now you don't need react-contexify any more. Use antd Dropdown component is better, you still need to custom the title of the tree node, then use Dropdown to wrapper it, like below: <Dropdown overlay={treeMenu} trigger={['contextMenu']}> <span>{${item.title}}</span> </Dropdown> treeMenu like this: const treeMenu = ( <Menu> <Menu.Item key="1">1st menu item</Menu.Item> <Menu.Item key="2">2nd menu item</Menu.Item> <Menu.Item key="3">3rd menu item</Menu.Item> </Menu> );

4.5以上版本基于 @PeiHaigang 的补充：

使用 titleRender + treeData 不需要再遍历树结构、生成TreeNode

<Tree 
  ...
  titleRender={(item) => (<Dropdown><span>{item.title}</span></Dropdown>)}
  treeData={treeData}
/>

yesmeck closed this as completed Mar 3, 2017

afc163 mentioned this issue Jul 6, 2017

tree组件能不能提供一个右键菜单的功能 #6743

Closed

cyrilzh mentioned this issue Oct 21, 2020

Props not passed when Items inside intermediary component fkhadra/react-contexify#132

Open

afc163 mentioned this issue Nov 11, 2021

Rightclick/contextmenu in Tree / DirectoryTree. #32819

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tree组件增加右键菜单 #5151

Tree组件增加右键菜单 #5151

bf185003 commented Mar 3, 2017

yesmeck commented Mar 3, 2017 •

edited by afc163

bf185003 commented Mar 6, 2017

yesmeck commented Mar 6, 2017 •

edited

jcy2004x commented Mar 31, 2017 •

edited

chj-damon commented Apr 6, 2017

jcy2004x commented Apr 10, 2017 •

edited

TengFeiHao commented Dec 13, 2017

lemonnoodle commented Dec 14, 2017

itskaiway commented Sep 10, 2018 •

edited

dargonpaul commented Sep 21, 2018 •

edited

guirenpei commented Jan 5, 2019 •

edited

itsXX commented Mar 18, 2019

guirenpei commented Mar 19, 2019

ChinaShrimp commented Mar 25, 2020

truewq commented May 10, 2020

truewq commented May 11, 2020

daixianceng commented Jun 19, 2020

ShawLyon commented Aug 6, 2020

PeiHaigang commented Oct 13, 2020

nanslee commented May 26, 2021

个人写法

nickrogit commented Dec 21, 2021

nickrogit commented Dec 21, 2021

ityoung commented Jan 20, 2022

Tree组件增加右键菜单 #5151

Tree组件增加右键菜单 #5151

Comments

bf185003 commented Mar 3, 2017

yesmeck commented Mar 3, 2017 • edited by afc163

bf185003 commented Mar 6, 2017

yesmeck commented Mar 6, 2017 • edited

jcy2004x commented Mar 31, 2017 • edited

chj-damon commented Apr 6, 2017

jcy2004x commented Apr 10, 2017 • edited

TengFeiHao commented Dec 13, 2017

lemonnoodle commented Dec 14, 2017

itskaiway commented Sep 10, 2018 • edited

个人写法

dargonpaul commented Sep 21, 2018 • edited

guirenpei commented Jan 5, 2019 • edited

itsXX commented Mar 18, 2019

guirenpei commented Mar 19, 2019

ChinaShrimp commented Mar 25, 2020

truewq commented May 10, 2020

truewq commented May 11, 2020

daixianceng commented Jun 19, 2020

ShawLyon commented Aug 6, 2020

PeiHaigang commented Oct 13, 2020

nanslee commented May 26, 2021

个人写法

nickrogit commented Dec 21, 2021

nickrogit commented Dec 21, 2021

ityoung commented Jan 20, 2022

yesmeck commented Mar 3, 2017 •

edited by afc163

yesmeck commented Mar 6, 2017 •

edited

jcy2004x commented Mar 31, 2017 •

edited

jcy2004x commented Apr 10, 2017 •

edited

itskaiway commented Sep 10, 2018 •

edited

dargonpaul commented Sep 21, 2018 •

edited

guirenpei commented Jan 5, 2019 •

edited