react 树形结构，点击弹出编辑删除

React树状组件实践

最新推荐文章于 2024-02-05 10:39:20 发布

原创最新推荐文章于 2024-02-05 10:39:20 发布 · 707 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #ecmascript

工具同时被 2 个专栏收录

31 篇文章

订阅专栏

React

29 篇文章

订阅专栏

本文介绍了一个基于React实现的树状组件案例，该组件具备展开、折叠、编辑及删除节点的功能，并通过状态管理实现了交互逻辑。文章详细展示了如何使用React的状态和属性来控制树状结构的显示与隐藏，同时提供了如何在复杂的数据结构中实现动态操作的方法。

在这里插入图片描述

        enditTreeNode: false, //编辑删除弹框
        editTreeId: '', //当前选中id
        
         class dataGatewayView extends dataGatewayController {
     //点击省略号弹出弹框
    nodeToDo = (data) => {
        const {enditTreeNode, editTreeId} = this.state;
        if (data.id == editTreeId && enditTreeNode) {
            this.setState({
                enditTreeNode: !enditTreeNode,
            })
        } else {
            this.setState({
                enditTreeNode: enditTreeNode ? enditTreeNode :!enditTreeNode,
                editTreeId: data.id
            })
        }
        
    }
    //关闭弹框
    closeNodeToDo = () => {
        this.setState({
            enditTreeNode: false
        })
    }
     render() {
        const { TabPane } = Tabs;
         const {enditTreeNode, editTreeId, tabsText, currentTabs} = this.state;
         const renderEntityTreeNodes = data => {
            return data.map(item => {
              const title = (
                  <div className="tree-item" style={{ width: '150px', display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
                      <span style={{width: '80%'}} onClick={() => this.handleTreeSelect(item)}><Icon type="gateway" />&nbsp;&nbsp;{`${item.title}`}</span>
                      <div>
                        <span style={{padding: '0 5px',  userSelect: 'none'}} onClick={() => this.nodeToDo(item)}>{item.children ? '' : '...'}</span>
                        <span style={{padding: '0 5px',  userSelect: 'none'}}>{item.children ? `(${item.children.length})` : ''}</span>
                        { enditTreeNode && item.id == editTreeId ?
                            <div style={{position: 'absolute'}}>
                                <div className="tree-item-last-after" onClick={(e) =>this.editTreeNode(e, item)}>
                                    编辑
                                </div>
                                <div className="tree-item-last-before" onClick={(e) => this.deleteTreeNode(e, item)}>
                                    删除
                                </div> 
                            </div>
                         : ''}
                      </div>
                  </div>
              );
        
              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 className="data-dictionary" style={{height: '100%', overflow: 'scroll'}}>
                 <Row>
                     <Col span={6} className="data-dictionary-left">
                         {/* tab栏选择 */} 
                         <div className="tabs-all">
                             {
                                 tabsText.map((t, i) => {
                                    return (
                                        <div className="tabs-item" style={currentTabs == t.num ? {backgroundColor: '#169BD5', color: '#fff'} : {}} onClick={() =>this.tabHandle(t.num)}>{t.value}({t.total})</div>
                                    )
                                 })
                             }
                         </div>
                        <div className="tree-content-scroll" style={{position: 'relative',}}>
                            <Tree showIcon={true} autoExpandParent defaultExpandAll defaultExpandParent>{renderEntityTreeNodes(this.state.menuTreeData)}</Tree>
                        </div>
                     </Col>
 
                     <Col span={18} className="data-dictionary-right" onClick={this.closeNodeToDo}>
                     </Col>
                 </Row>
             </div>
         );
     }
 }