为什么不使用Ant Tree Design在子组件中选中树复选框 [英] Why is not tree checkboxes checked in the child component using Ant Tree Design

问题描述

我正在尝试使用 Ant Tree组件来找出我做错了什么 . 我有两个组件，PageAdmin我进行了get调用，以获取有关树中应标记为已选中的节点的信息.我从服务器接收到数据，并将其放入数组checkedKeys中，并将其作为道具CustomTree发送到子组件，我可以看到CustomTree组件的道具已正确更新，但是未选择树中的节点，另外，当我选择另一个节点时，checkedKeys数组将被清除并仅替换为新选择的节点...

I'm trying to figure out what I'm doing wrong using this Ant Tree component. I have two components, the PageAdmin I do a get call to get information about what nodes in the tree that should be marked as selected. I receive the data from the server and put it in the array checkedKeys and send it to the child component as props CustomTree and I can see the props for the CustomTree component are correctly updated, but the nodes in the tree are NOT selected, plus when I selected another node the checkedKeys array are cleared out and replaced with only the new selected nodes...

有什么想法吗?

PageAdmin.js

import React, { Component } from "react";
import TreeMenu from "./TreeMenu";
import CustomTree from "./CustomTree";
import axios from "axios";

import "./PageAdmin.css"

const BASE_URL = "http://localhost:3000"

class PageAdmin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      treeID: this.props.match.params.id
    }
  }

  componentDidMount() {
    axios
      .get(`${BASE_URL}/eclass/all-nodes`)
      .then(result => {
        this.setState({
          treeData: result.data
        });
      })
    if (this.state.treeID) {
      console.log("yes we have a treeID")
      axios
        .get(`${BASE_URL}/eclass/custom/${this.state.treeID}`)
        .then(result => {
          this.setState({
            checkedKeys: result.data.checkedKeys
          });
        });
    }
  }

  handleCheckChange = (checkedKeys) => {
    this.setState({ checkedKeys });
    console.log("checkedKeys", checkedKeys)
  }

  handleSelectChange = (selectedKeys) => {
    this.setState({ selectedKeys });
    console.log("selectedKeys", selectedKeys)
  }

  handleExpandChange = (expandedKeys) => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  }

  render() {
    return (
      <div>
        <TreeMenu treeID={this.state.treeID} checkedKeys={this.state.checkedKeys} />
        <CustomTree
          onCheckChange={this.handleCheckChange}
          onSelectChange={this.handleSelectChange}
          onExpandChange={this.handleExpandChange}
          checkedKeys={this.state.checkedKeys}
          expandedKeys={this.state.expandedKeys}
          selectedKeys={this.state.selectedKeys}
          autoExpandParent={this.state.autoExpandParent}
          treeID={this.state.treeID}
          treeData={this.state.treeData} />
      </div>
    );
  }
}

export default PageAdmin;

CustomTree.js

import React, { Component } from "react";
import { Tree } from 'antd';
import "./CustomTree.css"
import 'antd/dist/antd.css'

const TreeNode = Tree.TreeNode;

class CustomTree extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  onExpand = (expandedKeys) => {
    console.log('onExpand', arguments);
    // console.log('expandedKeys', expandedKeys);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.

    this.props.onExpandChange(expandedKeys)
  }
  onCheck = (checkedKeys) => {
    // console.log('onCheck', checkedKeys);
    this.props.onCheckChange(checkedKeys);
  }
  onSelect = (selectedKeys, info) => {
    // console.log('info', info);
    // console.log("selectedKeys", selectedKeys)
    this.props.onSelectChange(selectedKeys);
  }

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

  render() {
    return (
      <Tree
        checkable
        onExpand={this.onExpand}
        onCheck={this.onCheck}
        onSelect={this.onSelect}
        checkedKeys={this.props.checkedKeys}
        expandedKeys={this.props.expandedKeys}
        autoExpandParent={this.props.autoExpandParent}
        selectedKeys={this.props.selectedKeys}
      >
        {this.renderTreeNodes(this.props.treeData)}
      </Tree>
    );
  }
}

export default CustomTree;

推荐答案

我找到了这个错误，我想分享我的解决方法.

I found the bug and I would like to share how I solved it.

在我首先获得树节点数据之前，其次我获得了有关选择了哪些节点的信息.我必须同时发出请求和更新状态，因为每个节点(TreeNode)的道具(例如checked和halfChecked)以前没有更新，但是现在可以处理下面的代码更改.

Before I did first got the tree node data and second I got the information about which nodes was selected. I had to make both request and update the state at the same time, as there are props for each Node (TreeNode) like checked and halfChecked that was not updated before, but now working with bellow changes in code.

  componentDidMount() {
    axios
      .get(`${BASE_URL}/eclass/all-nodes`)
      .then(allNodes => {
        if (this.state.treeID) {
          console.log("yes we have a treeID")
          axios
            .get(`${BASE_URL}/eclass/custom/${this.state.treeID}`)
            .then(dataCheckedKeys => {
              this.setState({
                checkedKeys: dataCheckedKeys.data.checkedKeys,
                nameOfTree: dataCheckedKeys.data.nameOfTree,
                treeData: allNodes.data
              });
            });
        } else {
          this.setState({
            treeData: allNodes.data
          });
        }
      })
  }

这篇关于为什么不使用Ant Tree Design在子组件中选中树复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！