react➕antd【树形列表，右键出现菜单】

水深无声 2022-02-05 10:51 611阅读 0赞

1，列表上右键事件  treeNodeonRightClick，代码中有

2，自定义右键菜单内容 getNodeTreeRightClickMenu，代码中有

3，return下面写入右键菜单内容 \{this.getNodeTreeRightClickMenu()\}

4，效果图

![2019050517254210.png][]

5，详细代码

import React, { PureComponent } from 'react';
    import { findDOMNode } from 'react-dom';
    import moment from 'moment';
    import { Link } from 'react-router-dom';
    import { connect } from 'dva';
    import { Row, Col, Table, Radio, Input, Form, Button, Icon, DatePicker, Select, Modal, Popconfirm, Badge, Dropdown, Tree, Menu, Popover, } from 'antd';
    import styles from './departmentList.less';
    
    const FormItem = Form.Item;
    const RadioButton = Radio.Button;
    const RadioGroup = Radio.Group;
    const SelectOption = Select.Option;
    const { Search, TextArea } = Input;
    const { TreeNode } = Tree;
    const treeData = [{}];
    
    @Form.create()
    class DepartmentList extends PureComponent {
      state = {
        expandedKeys: ['1', '2', '4'],
        autoExpandParent: true,
        checkedKeys: [],
        selectedKeys: [],
        value2: 'Apple',
        treeData: [],
        department_id: '',
        rightClickNodeTreeItem: {
          pageX: '',
          pageY: '',
          id: '',
          categoryName: '',
        },
        display: 'block',
      };
    
      componentDidMount() {
        const departmentsListTree = this.props.departmentList;
        this.setState({
          treeData: departmentsListTree,
        });
      }
    // 展开
      onExpand = (expandedKeys, expanded, record) => {
        // console.log('onExpand', expandedKeys);
        this.setState({
          expandedKeys,
          autoExpandParent: false,
        });
      };
    
      // 选择节点
      onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);
        const departmentId = info.selectedNodes[0].props.dataRef.id;
        // console.log('departmentId', departmentId);
        const { dispatch } = this.props;
        dispatch({ type: 'department/userRole', payload: { department_id: departmentId } });
        // console.log('id',info.selectedNodes[0].props.dataRef.id);
      };
    
      // 读取子节点
      renderTreeNodes = data =>
        data.map(item => {
          if (item.children) {
            return (
              <TreeNode title={item.name} key={item.id}  dataRef={item} data-key={item.id}  data-title={item.categoryName} >
                {this.renderTreeNodes(item.children)}
              </TreeNode>
            );
          }
          return <TreeNode {...item} dataRef={item} />;
        });
    
    // tree列表上右键事件
      treeNodeonRightClick = e => {
        this.setState({
          display: 'block',
          rightClickNodeTreeItem: {
            pageX: e.event.pageX,
            pageY: e.event.pageY,
            id: e.node.props['data-key'],
            categoryName: e.node.props['data-title'],
          },
        });
        // console.log("id::",e.node.props["title"])
      };
    
      // 点击取消隐藏
      hideRight = e => {
        this.setState({
          display: 'none',
        });
        console.log(this.state);
      };
    
      // 自定义右键菜单内容
      getNodeTreeRightClickMenu = () => {
        // alert(33)
        const { pageX, pageY, id } = { ...this.state.rightClickNodeTreeItem };
        // console.log("右键菜单id:",id);
        const tmpStyle = {
          position: 'absolute',
          left: `${pageX + 40}px`,
          top: `${pageY - 12}px`,
          display: this.state.display,
        };
        const menu = (
          <div style={tmpStyle} className={styles.selfrightmenu} onMouseLeave={this.hideRight}>
            <Link to={
       { pathname: '/SetUp/department/edit', query: { id: id } }}>
              <a>编辑</a>
            </Link>
            <Popconfirm title="确定删除此记录?" onConfirm={() => this.deleteDepartment(id)}>
              <a href="javascript:;"><a>删除</a></a>
            </Popconfirm>
    
            <Link to={
       { pathname: '/SetUp/userSet/edit', query: { department_id: id } }}>
              <a href="javascript:;">添加用户</a>
            </Link>
            <Link to={
       { pathname: '/SetUp/department/edit', query: { parent_id: id } }}>
              <a style={
       { borderBottom: '1px solid gainsboro', paddingBottom: '10px', display: ' block', }}>添加部门</a>
            </Link>
            <Button onClick={this.hideRight} style={
       { marginLeft: '15px', marginTop: '10px' }}>取消</Button>
          </div>
        );
        return this.state.rightClickNodeTreeItem == null ? '' : menu;
      };
    
    render() {
        const formItemLayout = {
          labelCol: {
            xs: { span: 20 },
            sm: { span: 6 },
          },
          wrapperCol: {
            xs: { span: 20 },
            sm: { span: 12 },
          },
        };
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        const modalVisible = this.props.modalVisible;
        const { dispatch } = this.props;
        const departmentsListTree = this.props.departmentList;
        const { checkedKeys, selectedValue, treeData, checkNodes, expandedKeys } = this.state;
    
        return (
          <div className={styles.listback}>
            <div style={
       { width: '35%', float: 'left' }}>
              <h3>部门树</h3>
              <Tree
                showLine
                expandedKeys={this.state.expandedKeys}
                onSelect={this.onSelect}
                onExpand={this.onExpand}
                onRightClick={this.treeNodeonRightClick}
              >
                {this.renderTreeNodes(departmentsListTree)}
              </Tree>
              {this.getNodeTreeRightClickMenu()}
            </div>
    
         
          </div>
        );
      }
    }
    function mapStateToProps(state) {
      return { ...state.department };
    }
    export default connect(mapStateToProps)(DepartmentList);

[2019050517254210.png]: /images/20220205/d0bd0c486af24cc68683fab9c8c93823.png