基于antd实现动态修改节点的Tree组件

原创

已于 2024-04-26 14:50:49 修改 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #前端

于 2023-10-17 19:40:35 首次发布

文章讲述了如何在基于React和AntDesign的项目中，利用Tree组件实现动态添加和删除节点，以及自定义节点时的输入验证和下拉菜单功能。作者详细介绍了DropdownInput组件的创建和使用，以及编辑节点和删除节点的处理逻辑。

前言

之前遇到一个需求，可对于任意节点添加或删除子节点。首先技术栈是基于react+ant design，ant提供了Tree组件，但都是根据固定的数据渲染出树结构，如果需要新增或删除节点，官网并未提供。

实现过程

新增节点

首先，要记录选中节点，在有选中的情况下点击全局的新增按钮，就相当于在选中的节点下新增子节点，否则直接在最外层节点添加新的节点（此时的情况就是有多个并列的根节点）。当然也可以直接点击节点出现下拉菜单，选择操作
在这里插入图片描述

然后，实现新增功能，在点击新增按钮之后，相应的节点位置出现输入框，按回车或者输入框失去焦点代表输入完成。找到插入位置，将新增的节点插入。

输入状态：
在这里插入图片描述
输入完成后：

需要自定义节点，点击节点（ant Dropdown组件也支持右键）显示下拉弹窗。
这里的DropdownInput是自定义的组件，因为需要校验输入内容

// DropdownInput组件
import {
   
    Dropdown, Input } from "antd";
import React, {
   
   
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from "react";
import type {
   
    InputProps } from "antd";
import _ from "lodash";

interface DropdownInputType extends InputProps {
   
   
  errorInfo?: string;
  initValue?: string;
}

const DropdownInputFun: React.ForwardRefRenderFunction<
  unknown,
  DropdownInputType
> = (props, ref) => {
   
   
  const {
   
    errorInfo, initValue, onChange, onBlur, onPressEnter } = props;
  const [open, setOpen] = useState<boolean>(false);
  const [errorText, setErrorText] = useState<string>("请输入中英文数字及下划线");
  const [value, setValue] = useState<string>(""); // 值

  const inputRef = useRef<any>(null);

  useImperativeHandle(ref, () => inputRef?.current);

  useEffect(() => {
   
   
    if (initValue) setValue(initValue);
  }, [initValue]);

  useEffect(() => {
   
   
    if (errorInfo) setErrorText(errorInfo);
  }, [errorInfo]);

  /** 监听输入报错 */
  const handleChange = _.debounce((e: any, isSure = false) => {
   
   
    const {
   
    value } = e?.target;
    const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
    if (!reg.test(value)) {
   
   
      setOpen(true);
    } else {
   
   
      setOpen(false);
      onChange?.(value);
    }
  }, 300);

  return (
    <Dropdown
      overlay={
   
   
        <div
          style={
   
   {
   
   
            background: "#fff",
            padding: "8px 12px",
            height: 20,
            boxShadow: "0px 2px 12px 0px rgba(0,0,0,0.06)",
          }}
        >
          {
   
   errorText}
        </div>
      }
      open={
   
   open}
    >
      <Input
        ref={
   
   inputRef}
        value={
   
   value}
        onChange={
   
   (e) => {
   
   
          e?.persist();
          setValue(e?.target?.value);
          handleChange(e);
        }}
        onBlur={
   
   (e) => {
   
   
          !open && onBlur?.(e);
        }}
        onPressEnter={
   
   (e: any) => {
   
   
          !open && onPressEnter?.(e);
        }}
        style={
   
   {
   
    width: 272, borderColor: open ? "red" : "" }}
      />
    </Dropdown>
  );
};
const DropdownInput = forwardRef(DropdownInputFun);
export