问题描述

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

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

**Parent Component**

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

    <HeaderRow>
                  <Button onClick={() => this.setExpandOrCollapse(true)}>Expand All</Button>
                  <Button onClick={() => this.setExpandOrCollapse(false)}>Collapse All</Button>
                </HeaderRow>

    <Card>
                  {ItemTree && (ItemTree.length > 0) ? (
                    <ItemTree
                      dataSource={ItemTree}
                      expandOrCollapse={expandOrCollapse}
                    />
                  ) : null }
                </Card>

**Child Component**
<Tree
      draggable={isDraggable}
      defaultExpandAll={expandOrCollapse}
    >
      {loopitemNodes(dataSource)}
    </Tree>

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 (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.key} {...item} />;
    });

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

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

  render() {
    return (
      <Fragment>
        <button onClick={this.expandAll}>Expand All</button>
        <button onClick={this.collapseAll}>Collapse All</button>
        <Tree onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}>
          {this.renderTreeNodes(treeData)}
        </Tree>
      </Fragment>
    );
  }
}

Codesandbox

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