本文介绍了Ant设计树默认为ExpanAll不能使用Reaction的按钮单击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用Ant Design for Reaction Js UI。我使用树组件显示在列表中。我也有2个按钮来展开和折叠树列表。我使用defaultExpanAll道具来管理它。 在展开和折叠按钮上，单击我将布尔值分别设置为True和False。 按钮它不会在按钮点击时展开。 如果我最初将该标志状态设置为True，它就会起作用。 有什么解决办法吗？

我有两个组件。(展开和折叠按钮位于父组件中)

**parent Component**

    setExpandOrCollapse(value) {
        this.setState({ expandOrCollapse: value });
      }

    
                   this.setExpandOrCollapse(true)}>Expand All
                   this.setExpandOrCollapse(false)}>Collapse All
                

    
                  {ItemTree && (ItemTree.length > 0) ? (
                    
                  ) : null }
                

**Child Component**

      {loopitemNodes(dataSource)}
    

DataSource从Redux API调用获取。

有什么变通办法吗？

推荐答案

Ant设计中以default为前缀的状态仅在第一次呈现时才起作用(因此default)。

要进行程序化展开和折叠，需要使用expandedKeys和onExpand道具控制树的展开。

import { flattenDeep } from "lodash";

class Demo extends React.Component {
  state = {
    expandedKeys: []
  };

  constructor(props) {
    super(props);
    this.keys = this.getAllKeys(treeData);
  }

  getAllKeys = data => {
    // This function makes an array of keys, this is specific for this example, you would have to adopt for your case. If your list is dynamic, also make sure that you call this function everytime data changes.
    const nestedKeys = data.map(node => {
      let childKeys = [];
      if (node.children) {
        childKeys = this.getAllKeys(node.children);
      }
      return [childKeys, node.key];
    });
    return flattenDeep(nestedKeys);
  };

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

  renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          
            {this.renderTreeNodes(item.children)}
          
        );
      }
      return ;
    });

  expandAll = () => {
    this.setState({
      expandedKeys: this.keys
    });
  };

  collapseAll = () => {
    this.setState({
      expandedKeys: []
    });
  };

  render() {
    return (
      
        Expand All
        Collapse All
        
          {this.renderTreeNodes(treeData)}
        
      
    );
  }
}

Codesandbox

这篇关于Ant设计树默认为ExpanAll不能使用Reaction的按钮单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持吉威生活！

[英文标题]Ant design Tree defaultExpandAll doesnt work with button click for react

声明：本媒体部分图片、文章来源于网络，版权归原作者所有，如有侵权，请联系QQ:330946442删除。