Question

我将Ant设计用于React Js UI。我正在使用Tree组件显示在列表中。我也有2个按钮来展开和折叠“树”列表。我使用 defaultExpandAll 道具进行管理。在展开和折叠按钮上，单击我分别将布尔值设置为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>
    );
  }
}

请参考Codesandbox链接

蚂蚁设计树defaultExpandAll不能与单击按钮反应

2 个答案: