react-hooks 基于antd库实现对树组件节点名称的编辑

最新推荐文章于 2024-11-01 00:43:56 发布

原创

最新推荐文章于 2024-11-01 00:43:56 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react

唉～～一看就会的功能，自己上手还是花了四十多分钟近一个小时的样子,又是脑子会了系列…

antd中的Tree组件本身不支持对节点数据名称进行修改的功能，但是TreeNode的Title属性支持自定义。

解题思路：
1.修改的时候，弹出一个编辑框，然后对节点名称进行编辑。
2.将节点名称直接渲染成一个input框，输入修改。

因为是面试题，有时间限制问题，所以这里用的是我认为最简单直接的方法。

稍微难点在自己去构造递归函数，函数接受两个参数，一个是node,即编辑框传出来的修改value（一定要带上key），另一个是当前元素的子级数据。

代码如下：
index.js

import React, {
   
    useEffect, useState } from "react";
import {
   
    Tree } from "antd";
import ModalForm from "./modal-form";
const treeData = [
  {
   
   
    title: "0-0",
    key: "0-0",
    children: [
      {
   
   
        title: "0-0-0",
        key: "0-0-0",
        children: [
          {
   
    title: "0-0-0-0", key: "0-0-0-0" },
          {
   
    title: "0-0-0-1", key: "0-0-0-1" },
          {
   
    title: "0-0-0-2", key: "0-0-0-2" },
        ],
      },
      {
   
   
        title: "0-0-1",
        key: "0-0-1",
        children: [
          {
   
    title: "0-0-1-0", key: "0-0-1-0" },
          {
   
    title: "0-0-1-1", key: "0-0-1-1" },
          {
   
    title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
      {
   
   
        title