react使用ant-design Tree组件使用treeData自定义title,给变量赋值后,却无法取得更新后的数据

发布于 2022-09-12 03:24:09 字数 2205 浏览 9 评论 0

react hook+ant-design(4.x版本) Tree组件,在自定义的title里面增加了两个操作按钮,点击编辑时更新 name 变量,页面也成功渲染出更新后的数据,但是当点击增加按钮,打印 name 变量时,得到的数据却是空的,代码如下:


import React, {Component, useState, useEffect} from 'react'
import {Tree} from 'antd'
import { PlusSquareOutlined, EditOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons'

function Tab() {
  const data1 = [
    {
      value: 'Root',
      defaultValue: 'Root',
      key: '0-1',
      parentKey: '0',
      isEditable: false
    }
  ]

  const [data, setData] = useState(data1)
  const [name, setName] = useState('')

  const renderTreeNodes = data => data.map((item) => {
        if (item.isEditable) {
            item.title = (
                <div>
                    <CloseCircleOutlined style={{ marginLeft: 10 }} onClick={() => onClose(item.key, item.defaultValue)}/>
                    <CheckCircleOutlined style={{ marginLeft: 10 }} onClick={() => onSave(item.key)} />
                </div>
            );
        } else {
            item.title = (
                <div>
                    <span>
                        {item.value}
                    </span>
                    <span> 
                        <EditOutlined style={{ marginLeft: 10 }} onClick={() => onEdit(item.key)}/>
                        <PlusSquareOutlined style={{ marginLeft: 10 }} onClick={() => onAdd(item.key)}/>
                    </span>
                </div>
            )
        }

        if (item.children) {
          renderTreeNodes(item.children);
        }
        return item;
    })

    useEffect(() => {
      renderTreeNodes(data)
    }, [])


  const onAdd = (e) => {
    // 此处打印 name 时无法打印出 name 的值
    console.log('name:', name)
  }

  const onEdit = (key) => {
    console.log('edit');
    // 此处给 name 变量赋值
    setName('12343')
  }
  const onClose = () =>{}
  const onSave = () => {}

  return (
    <div>
      <Tree treeData={data}></Tree>
      {/* 点击编辑按钮后,此处有渲染出来 */}
      <div>{name}</div>
    </div>
  )
}

export default Tab;

有没有小伙伴帮忙看下,是因为什么?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文