Ant 设计 Tree defaultExpandAll 不适用于按钮单击以进行react

IT技术 html reactjs react-props
2021-05-14 16:19:15

我正在将 Ant Design 用于 React Js UI。正在使用 Tree 组件显示在列表中。我还有 2 个按钮来展开和折叠树列表。我使用defaultExpandAllprops来管理它。在展开和折叠按钮上单击我将布尔值分别设置为 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>

数据源是从 Redux api 调用中获得的。

有没有解决办法。

2个回答

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

为了实现程序化的展开和折叠，您需要控制树 usingexpandedKeys和onExpandprops 的展开。

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>
    );
  }
}

代码沙盒

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链接

其它你可能感兴趣的问题
上一篇html 标签属性“data-setbg”在 React 项目中不起作用 下一篇如何检查 react-router 是否在上下文中？