Ant design Tree defaultExpandAll 不适用于单击按钮以做出反应

Question

我正在为 React Js 使用 Ant Design UI。我正在使用 Tree 组件显示在列表中。我还有 2 个按钮来展开和折叠树列表。我使用 defaultExpandAll 道具来管理它。在展开和折叠按钮上单击我分别将 bool 设置为 true 和 false。按钮它不会在按钮单击时展开。如果我最初将 True 设置为该标志状态，它就可以工作。附近有工作吗

我有 2 个组件。（展开和折叠按钮在父组件中）

**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 调用中获取的。

是否有解决办法。

Answer 1

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

Answer 2

class Demo extends React.Component {
  state = {
    expandedKeys: ["0-0-0", "0-0-1"],
    autoExpandParent: true,
    selectedKeys: []
  };

  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,
      autoExpandParent: false
    });
  };

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

  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} />;
    });
  onExpandAll = () => {
    const expandedKeys = [];
    const expandMethod = arr => {
      arr.forEach(data => {
        expandedKeys.push(data.key);
        if (data.children) {
          expandMethod(data.children);
        }
      });
    };
    expandMethod(treeData);
    this.setState({ expandedKeys });
  };
  onCollapseAll = () => {
    this.setState({ expandedKeys: [] });
  };
  render() {
    return (
      <Fragment>
        <Button onClick={this.onExpandAll} type="primary">
          ExpandAll
        </Button>
        <Button onClick={this.onCollapseAll} type="primary">
          CollapseAll
        </Button>
        <Tree
          onExpand={this.onExpand}
          expandedKeys={this.state.expandedKeys}
          autoExpandParent={this.state.autoExpandParent}
          selectedKeys={this.state.selectedKeys}
        >
          {this.renderTreeNodes(treeData)}
        </Tree>
      </Fragment>
    );
  }
}

请参考Codesandboxlink

Ant design Tree defaultExpandAll 不适用于单击按钮以做出反应

Ant design Tree defaultExpandAll doesnt work with button click for react

html

reactjs

react-props