antd 可编辑树，可搜索

效果：

搜索效果：

编辑效果：

 

搜索功能代码：

          <Search className='Search' 
            placeholder="请输入搜索关键词" 
            allowClear 
            bordered={false} 
            onChange={onChange} />
         
        <Tree
            checkable
            onExpand={onExpand}
            expandedKeys={expandedKeys}
            autoExpandParent={autoExpandParent}
            treeData={loop(PointtreeData)}
            onCheck={onCheckTree}
          />

/**树搜索功能 */
  const dataList = [];
  const generateList = data => {
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      const { key, title } = node;
      dataList.push({ key, title: title });
      if (node.children) {
        generateList(node.children);
      }
    }
  };
  generateList(PointtreeData);

  const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some(item => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };

  const [state, setstate] = useState({
    expandedKeys: [],
    searchValue: '',
    autoExpandParent: false,
  });

  const onExpand = expandedKeys => {
    setstate({
      expandedKeys: expandedKeys,
      searchValue: '',
      autoExpandParent: false,
    });
  };

  const onChange = e => {
    const { value } = e.target;
    const expandedKeys = dataList
      .map(item => {
        if (item.title.indexOf(value) > -1) {
          return getParentKey(item.key, PointtreeData);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    setstate({
      expandedKeys: expandedKeys,
      searchValue: value,
      autoExpandParent: true,
    });
  };

  const { searchValue, expandedKeys, autoExpandParent } = state;
//搜索结果重新渲染Treenode，存在一个问题，如果搜索功能和编辑树功能同时需要的话，树组件中
//tree={loop(treeData)}会造成编辑树功能无法重新渲染树，node中input渲染不出来
  const loop = data =>
    data.map(item => {
      const index = item.title.indexOf(searchValue);
      const beforeStr = item.title.substr(0, index);
      const afterStr = item.title.substr(index + searchValue.length);
      const title =
        index > -1 ? (
          <span>
            {beforeStr}
            <span style={{ color: '#f50' }}>{searchValue}</span>
            {afterStr}
          </span>
        ) : (
          <span>{item.title}</span>
        );
      if (item.children) {
        return { title, key: item.key, children: loop(item.children) };
      }

      return {
        title,
        key: item.key,
      };
    });

编辑树

首先渲染树节点，antd4.0渲染写法，需要提前改造TreeData数据，添加一个isEditable字段，默认全部为false

<Tree
            checkable
            onExpand={onExpand}
            expandedKeys={expandedKeys}
            autoExpandParent={autoExpandParent}
            treeData={PointtreeData}
            onCheck={onCheckTree}
            titleRender={(data) => {
            if (data.isEditable) {
              data.value = (
                <div className='TreeNodeinput'>
                  <Input defaultValue={data.title}
                    suffix={
                      <Tooltip>
                        <img style={{ marginLeft: 10 }} onClick={()=>confirmTreeLable(data.key)} src={require('../../static/assets/imgs/InspectionModule/confim.png')}></img>
                        <img style={{ marginLeft: 10 }} src={require('../../static/assets/imgs/InspectionModule/chaenl.png')}></img>
                      </Tooltip>
                    }>
                  </Input>
                </div>
              )
            } else {
              data.value = (
                <div className='TreeBody'>
                  <div className='TreeLeft'>
                    <i className='Lable'></i>
                    <span>{data.title}</span>
                    <span>
                      <img style={{ marginLeft: 10 }} onClick={() => onEdit(data.key)} src={require('../../static/assets/imgs/InspectionModule/Ediet.png')}></img>
                      <img style={{ marginLeft: 10 }} src={require('../../static/assets/imgs/InspectionModule/postion.png')}></img>
                    </span>
                  </div>
                  <div className='TreerightPannel'>
                    <span className='TreeText'>已标定</span>
                    <span className='TreeText'>已匹配</span>
                  </div>
                </div>
              );
            } 
           if (data.children) {
              return <div>{data.title}</div>;
            }
            return <div>{data.value}</div>
          }}
          />

如果是antd3.0 ,这个是最初版本，渲染节点可以参考上面4.0进行改造

 /**渲染树节点 */
  const renderTreeNodes = (data) => {
    let nodeArr = data.map((item) => {
      item.value = (
        <div>
          <span>{item.title}</span>
          <span>
            <img style={{ marginLeft: 10 }} src={require('./static/assets/imgs/InspectionModule/Ediet.png')}></img>
            <img style={{ marginLeft: 10 }} src={require('./static/assets/imgs/InspectionModule/postion.png')}></img>
          </span>
          <span>
            <Button type="link">已标定</Button>
            <Button type="link">已匹配</Button>
          </span>
        </div>
      );

      if (item.children) {
        return (
          <TreeNode title={item.value} key={item.point_id} dataRef={item}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode title={item.value} key={item.type_id} />;
    });

    return nodeArr;

  };
<tree>
renderTreeNodes (TreeData)
</tree>

 /**编辑树 */
  const onEdit = (key) => {
    editNode(key, PointtreeData);
    setPointtreeData(PointtreeData.slice());
  };
  const editNode = (key, data) =>
    data.forEach((item) => {
      if (item.key === key) {
        item.isEditable = true;
      } else {
        item.isEditable = false;
      }
      item.value = item.title; // 当某节点处于编辑状态，并改变数据，点击编辑其他节点时，此节点变成不可编辑状态，value 需要回退到 defaultvalue
      if (item.children) {
        editNode(key, item.children);
      }
    });
    const confirmTreeLable=(key)=>{
       //这边思路是获取input里面的值，然后重新赋值给TreeData，或者根据后台接口保存到后台，
//然后重新请求树，目前我不确定那种方式，所有没有写
    //保存后，isEditable重新设置为false
      ConfimTreeNodeLable(key,PointtreeData)
      setPointtreeData(PointtreeData.slice())//刷新treedata
    }
    const ConfimTreeNodeLable=(key,data)=>{
      data.forEach((item) => {
        if (item.key === key) {
          item.isEditable = false;
        }
        if (item.children) {
          ConfimTreeNodeLable(key, item.children);
        }
      })
    }

 编辑功能参考：React项目引入antd的树形控件实现节点增删改_赐你岁月如歌的博客-CSDN博客_antd树形控件前言浏览一些主流面试题的时候，发现有的面试题让动手写一个基于antd的树形控件的增删改功能，本来以为antd的组件应该挺简单的，没想到动手做的时候还是费了不少力气。所以就打算记录一下，实现需求的整个过程。一、 引入antd的树形控件使用过antd的小伙伴应该都知道，使用antd就是把它的代码示例粘贴下来，然后根据自己的需求和antd提供的API进行更改。所以这里我也是找一个简单antd树形控件代码示例，不管三七二十一先粘贴进去看看结果怎么样。import React from "react";imhttps://blog.csdn.net/a253399414/article/details/115523069?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-115523069-null-null.pc_agg_new_rank&utm_term=antd%E6%A0%91%E5%BD%A2%E6%8E%A7%E4%BB%B6%E7%BC%96%E8%BE%91%E5%88%A0%E9%99%A4&spm=1000.2123.3001.4430