为什么不使用 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 数组被清除并仅替换为新选择的节点...

知道发生了什么吗?

PageAdmin.js

import React, { Component } from "react";从./TreeMenu"导入树菜单；从./CustomTree"导入自定义树；从axios"导入 axios；导入./PageAdmin.css"const BASE_URL = "http://localhost:3000"类 PageAdmin 扩展组件 {构造函数(道具){超级(道具)；this.state = {扩展键:[]，autoExpandParent:真，检查键:[]，selectedKeys: [],树数据:[]，treeID: this.props.match.params.id}}componentDidMount() {公理.get(`${BASE_URL}/eclass/all-nodes`).then(结果 => {this.setState({树数据:result.data});})如果(this.state.treeID){console.log("是的，我们有一个 treeID")公理.get(`${BASE_URL}/eclass/custom/${this.state.treeID}`).then(结果 => {this.setState({已检查密钥: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({扩展键，autoExpandParent:假，});}使成为() {返回 (<div><TreeMenu treeID={this.state.treeID} checkedKeys={this.state.checkedKeys}/><自定义树onCheckChange={this.handleCheckChange}onSelectChange={this.handleSelectChange}onExpandChange={this.handleExpandChange}CheckedKeys={this.state.checkedKeys}expandKeys={this.state.expandedKeys}selectedKeys={this.state.selectedKeys}autoExpandParent={this.state.autoExpandParent}treeID={this.state.treeID}treeData={this.state.treeData}/>

);}}导出默认页面管理；

CustomTree.js

import React, { Component } from "react";从'antd'导入{树}；导入./CustomTree.css"导入'antd/dist/antd.css'const TreeNode = Tree.TreeNode;类 CustomTree 扩展组件 {构造函数(道具){超级(道具)；this.state = {}}onExpand = (expandedKeys) =>{console.log('onExpand', 参数);//console.log('expandedKeys', expandKeys);//如果没有将 autoExpandParent 设置为 false，如果子项展开，父项不能折叠.//或者，您可以删除所有扩展的子键.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.map((item) => {如果(item.children){返回 (<TreeNode title={item.title} key={item.key} dataRef={item}>{this.renderTreeNodes(item.children)}</TreeNode>);}返回 <TreeNode {...item}/>;});}使成为() {返回 (<树可检查的onExpand={this.onExpand}onCheck={this.onCheck}onSelect={this.onSelect}checkedKeys={this.props.checkedKeys}expandKeys={this.props.expandedKeys}autoExpandParent={this.props.autoExpandParent}selectedKeys={this.props.selectedKeys}>{this.renderTreeNodes(this.props.treeData)}</树>);}}导出默认自定义树；

解决方案

我发现了这个错误，我想分享我是如何解决它的.

在我第一次获得树节点数据之前，第二次我获得了有关选择了哪些节点的信息.我必须同时发出请求和更新状态，因为每个节点(TreeNode)都有道具，例如 checked 和 halfChecked 之前没有更新，但是现在正在处理代码中的波纹管更改.

 componentDidMount() {公理.get(`${BASE_URL}/eclass/all-nodes`).then(allNodes => {如果(this.state.treeID){console.log("是的，我们有一个 treeID")公理.get(`${BASE_URL}/eclass/custom/${this.state.treeID}`).then(dataCheckedKeys => {this.setState({checkedKeys:dataCheckedKeys.data.checkedKeys，nameOfTree: dataCheckedKeys.data.nameOfTree,树数据:allNodes.data});});} 别的 {this.setState({树数据:allNodes.data});}})}

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...

Any ideas what is happening?

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.

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屋！