DouyinFE / semi-design

🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click
https://semi.design
Other
8.56k stars 721 forks source link

Tree 树形控件,onchange获取的值异常 #2508

Open sp4rkw opened 2 months ago

sp4rkw commented 2 months ago

简单 JSON 格式的数据,如果json有三层,,onchange获取的值异常 image

import React from 'react';
import { Tree } from '@douyinfe/semi-ui';

() => {
    const json = {
        "Node1": {
            "Child Node11": {
            "Child Node13": '0-0-1',
            "Child Node12": '0-0-99',
        },
            "Child Node9": {
            "Child Node91": '9-1',
            "Child Node92": '9-99',
        },
        },
        "Node2": "0-1"
    };
    const style = {
        width: 260,
        height: 420,
        border: '1px solid var(--semi-color-border)'
    };
    return (
        <Tree
            treeDataSimpleJson={json}
            multiple
            onChange={e => console.log('当前所有选中项: ', e)}
            onSelect={e => console.log('当前选项: ', e)}
            style={style}
        />

    );
};

如果此处是预期内的bug问题,那有什么替代的实现方案么?

YyumeiZhang commented 2 months ago

这个问题应该属于 bug,我们这边做下修复,预计跟下个正式版(2.67.0)

YyumeiZhang commented 2 months ago

@sp4rkw 使用 onChange 是想要受控吗?

sp4rkw commented 2 months ago

@sp4rkw 使用 onChange 是想要受控吗? 使用onchange结合value是为了解决初始被选中值,由服务端传递来渲染

YyumeiZhang commented 2 months ago

我这边发现 json 模式下的 value 受控有点问题,这个问题的解决比昨天预先的要复杂一些。@sp4rkw 是属于字节内部用户还是外部用户?

YyumeiZhang commented 2 months ago

这个问题应该属于 bug,我们这边做下修复,预计跟下个正式版(2.67.0)

由于发现其他问题,需要其他时间处理,预计 10 月跟进

sp4rkw commented 2 months ago

我这边发现 json 模式下的 value 受控有点问题,这个问题的解决比昨天预先的要复杂一些。@sp4rkw 是属于字节内部用户还是外部用户?

外部用户

sp4rkw commented 1 month ago

这个问题应该属于 bug,我们这边做下修复,预计跟下个正式版(2.67.0)

由于发现其他问题,需要其他时间处理,预计 10 月跟进

大佬有空跟进一下哈

YyumeiZhang commented 5 days ago

之前被别的事情占据了时间,这两天看了下。

  1. 对于 onChange 回调的值不正确的问题,修复比较容易。
  2. 对于设置了 treeDataSimpleJson 的情况下,目前代码中没有支持使用 onChange 回调的值作为 value 来受控的逻辑。如果将 onChange 的值作为 value 来受控,对以下情况不好处理: 对于json 结构如下:
    const json = {
        "Node1": {
            "ChildNode1": '0-0-1',
        }
    };

选中 Node1,或者 ChildNode1,onChange 中的 value 均为

{
      "Node1": {
          "ChildNode1": '0-0-1',
      }
};

如果将此 value 作为 Tree 的受控 value ,组件内部无法确定实际选中的是 Node1 还是 ChildNode1。 因此将 onChange 的 value 参数直接作为 Tree 组件 value 的受控值似乎不可行?