Antd的TreeSelect通过treeData生成的控件无法获得父节点信息

Question

问题描述

1. 触发onSelect/onChange事件时,第一个参数(selectedKeys)只有选中节点信息,如何附带上父节点信息呢？(如果可以 最好也能在Input里加上父节点信息)

问题出现的环境背景及自己尝试过哪些方法

相关代码

// TreeData
[{
    "title": "前端",
    "key": 10000,
    "value": 10000,
    "children": [
      {
        "title": "React",
        "value": 10004,
        "key": 10004,
        "children": [
          {
            "title": "学习文档",
            "value": 10027,
            "key": 10027,
            "children": []
          },
          {
            "title": "个人总结",
            "value": 10028,
            "key": 10028,
            "children": []
          }
        ]
      },
      {
        "title": "Vue",
        "value": 10005,
        "key": 10005,
        "children": []
      },
      {
        "title": "Node",
        "value": 10006,
        "key": 10006,
        "children": []
      }
    ]
 }]

选中学习文档节点时获取的信息

你期待的结果是什么？实际看到的错误信息又是什么？

希望keys返回的是一个数组 并附上父级id

Answer 1

官方给出解释: 从性能考虑，父节点信息是不透出的.需要自己map出来

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { TreeSelect } from "antd";

const treeData = [
  {
    title: "Node1",
    value: "0-0",
    key: "0-0",
    children: [
      {
        title: "Child Node1",
        value: "0-0-1",
        key: "0-0-1"
      },
      {
        title: "Child Node2",
        value: "0-0-2",
        key: "0-0-2"
      }
    ]
  },
  {
    title: "Node2",
    value: "0-1",
    key: "0-1"
  }
];

const valueMap = {};
function loops(list, parent) {
  return (list || []).map(({ children, value }) => {
    const node = (valueMap[value] = {
      parent,
      value
    });
    node.children = loops(children, node);
    return node;
  });
}

loops(treeData);

class Demo extends React.Component {
  state = {
    value: undefined
  };

  onChange = value => {
    console.log(value);
    this.setState({ value });
  };

  onSelect = value => {
    const path = [];
    let current = valueMap[value];
    while (current) {
      path.unshift(current.value);
      current = current.parent;
    }
    console.log("Select:", path);
  };

  render() {
    return (
      <TreeSelect
        style={{ width: 300 }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
        treeData={treeData}
        placeholder="Please select"
        treeDefaultExpandAll
        onChange={this.onChange}
        onSelect={this.onSelect}
      />
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById("container"));

Answer 2

怎么将父节点的信息和子节点拼接到框里

Answer 3

我这边写这个的时候是写一个异步的树，:load-data绑定的方法传入的第二个对象是包含父节点的，其中的dataRef是父节点的指针。我调用完服务，用返回的参数弄子节点的时候会给子节点加个parent：object.dataRef，到时候直接取得parent里面的值就好了。
就你这个例子而言应该构建的时候加一下就行了。选中的话，改下v-model的值应该就行了吧，大概...如果有很多层，相信以你的智慧会懂得怎么改成递归写法的。

data(){
return {
    tree:this.createtree ()
}
}，
methods:{
createtree () {
      let tree = {
        'title': '前端',
        'key': 10000,
        'value': 10000,
        'children': []
      }
      let children = [
        {
          'title': '学习文档',
          'value': 10027,
          'key': 10027,
          parent: tree,
          'children': []
        },
        {
          'title': '个人总结',
          'value': 10028,
          'key': 10028,
          parent: tree,
          'children': []
        }
      ]
      tree.children = children
      return tree
    }
}