Ant Design tree控件 onload事件不触发

Question

问题描述

onload 事件没有触发。请大佬指点是否写法错误

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

class Demo extends React.Component {
onSelect = (selectedKeys, info) => {

console.log("selected", selectedKeys, info);

};

onCheck = (checkedKeys, info) => {

console.log("onCheck", checkedKeys, info);

};
onLoad = (loadedKeys, info) => {

debugger;
console.log("loadedKeys");

};
render() {

return (
  <Tree
    checkable
    defaultExpandedKeys={["0-0-0", "0-0-1"]}
    defaultSelectedKeys={["0-0-0", "0-0-1"]}
    defaultCheckedKeys={["0-0-0", "0-0-1"]}
    onSelect={this.onSelect}
    onCheck={this.onCheck}
    onLoad={this.onLoad}
  >
    <TreeNode title="parent 1" key="0-0">
      <TreeNode title="parent 1-0" key="0-0-0" disabled>
        <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
        <TreeNode title="leaf" key="0-0-0-1" />
      </TreeNode>
      <TreeNode title="parent 1-1" key="0-0-1">
        <TreeNode
          title={<span style={{ color: "#1890ff" }}>sss</span>}
          key="0-0-1-0"
        />
      </TreeNode>
    </TreeNode>
  </Tree>
);

}
}

Answer 1

这里的onLoad 需要配合 loadData 异步加载数据才能触发节点加载完毕事件

state = {
    treeData: [
      { title: 'Expand to load', key: '0' },
      { title: 'Expand to load', key: '1' },
      { title: 'Tree Node', key: '2', isLeaf: true },
    ],
  }

  onLoadData = treeNode => new Promise((resolve) => {
    if (treeNode.props.children) {
      resolve();
      return;
    }
    setTimeout(() => {
      treeNode.props.dataRef.children = [
        { title: 'Child Node', key: `${treeNode.props.eventKey}-0` },
        { title: 'Child Node', key: `${treeNode.props.eventKey}-1` },
      ];
      this.setState({
        treeData: [...this.state.treeData],
      });
      resolve();
    }, 1000);
  })

  renderTreeNodes = data => data.map((item) => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.key} dataRef={item}>
          {this.renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode {...item} dataRef={item} />;
  })
  onLoad = (loadedKeys, info) => {

    debugger;
    console.log("loadedKeys");
  };

  render() {
    return (
      <Tree loadData={this.onLoadData} onLoad={this.onLoad}>
        {this.renderTreeNodes(this.state.treeData)}
      </Tree>
    );
  }