Дерево дизайна Ant defaultExpandAll не работает с нажатием кнопки для реакции

Question

Я использую Ant Design для React Js Пользовательский интерфейс. Я использую компонент дерева, чтобы показать в списке. У меня также есть 2 кнопки, чтобы развернуть и свернуть список дерева. Я использую defaultExpandAll prop для управления этим. Нажимая кнопку «Развернуть и свернуть», я устанавливаю 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>

Источник данных получается из вызова API Redux.

Есть ли обходной путь.

Answer 1

Состояния в дизайне Ant с префиксом default работают только при первом отображении (и, следовательно, default).

Для разработки программ c развернуть и свернуть , вам нужно контролировать расширение дерева, используя 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>
    );
  }
}

см. Ссылку Codesandbox