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

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

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: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
    title: "0-2",
    key: "0-2",
  },
];

const Demo = () => {
  const [formData, setFormData] = useState({});
  const [visible, setVisible] = useState(false);
  const [data, setData] = useState(treeData);

  const onSelect = (selectedKeys, info) => {
    setFormData(info.node);
    setVisible(true);
  };

  useEffect(() => {
    setData(treeData);
  }, [treeData]);

  const onCreate = (values) => {
    changeNode(values, treeData);  // 刚开始是遍历整个树形结构的一级节点，所以传treeData
    // 修改treeData的值
    setData(treeData);
    setVisible(false);
  };

  const changeNode = (node, data) => {
    data.map((item) => {
    // 如果修改的是一级节点，直接修改
      if (item.key === node.key) {
        item.title = node.nodeName;
      }
      // 如果存在子级节点，递归传入children数组，在子数组里查找当前修改的key
      if (item.children) {
        changeNode(node, item.children);
      }
    });
  };

  return (
    <div>
      <Tree
        onSelect={onSelect}
        treeData={treeData}
      />
      <ModalForm
        visible={visible}
        formData={formData}
        onCreate={onCreate}
        onCancel={() => setVisible(false)}
      />
    </div>
  );
};

export default Demo;

modal-form.js

import React, { useEffect, useState } from "react";
import { Modal, Form, Input } from "antd";

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
};

const ModalForm = ({
  visible,
  formData,
  onCreate,
  onCancel,
}) => {
  const [form] = Form.useForm();
  
  useEffect(() => {
    if (visible) {
      const {
        handleExplain,
      } = formData;
      form.setFieldsValue({
        nodeName:formData.title
      });
    }

  }, [visible, formData, form]);

  return (
    <Modal
      width={600}
      visible={visible}
      title="修改"
      onCancel={onCancel}
      destroyOnClose
      onOk={() => {
        form
          .validateFields()
          .then(values => {
            const params = Object.assign({}, formData, {
              ...values
            });
            
            onCreate(params);
          })
          .catch(info => {
            console.log("Validate Failed:", info);
          });
      }}
    >
      <Form {...layout} form={form} name="form_in_modal">
        <Form.Item
          label="节点名称"
          name="nodeName"
          rules={[{ required: true, message: "请填写节点名称！" }]}
        >
          <Input.TextArea placeholder="请填写节点名称" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ModalForm;

扩展：新增节点名称 （欢迎讨论呀～～～）