如何在单击按钮时折叠和展开 antd TreeSelect 项目？答案

【问题标题】：How to collapse and expand antd TreeSelect items on click of a button?如何在单击按钮时折叠和展开 antd TreeSelect 项目？
【发布时间】：2021-04-07 13:36:57
【问题描述】：

我正在使用 antd 库来开发我的网站。我正在使用TreeSelect 组件来显示一些嵌套选项，并且我已经成功实现了。

但我面临以下问题：我正在尝试通过单击按钮来展开和折叠 TreeSelect 项目。谁能帮我解决这个问题？

下面的代码我用于按钮事件

expandCollapseOpions = () => {
    this.setState({
      isExpandCollpase: !this.state.isExpandCollpase
    });
};

下面是我使用的属性，我觉得不正确。

treeDefaultExpandAll={this.state.isExpandCollpase}

完整代码：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { TreeSelect } from "antd";

const { TreeNode } = TreeSelect;

class Demo extends React.Component {
  state = {
    value: undefined,
    isExpandCollpase: true
  };

  onChange = value => {
    console.log(value);
    this.setState({ value });
  };

  expandCollapseOpions = () => {
    this.setState({
      isExpandCollpase: !this.state.isExpandCollpase
    });
  };

  render() {
    return (
      <div>
        <button onClick={() => this.expandCollapseOpions()}>
          Expand/Collapse Options
        </button>
        <br />
        <br />
        <TreeSelect
          showSearch
          multiple
          style={{ width: "100%" }}
          value={this.state.value}
          dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
          placeholder="Please select"
          allowClear
          treeDefaultExpandAll={this.state.isExpandCollpase}
          onChange={this.onChange}
        >
          <TreeNode value="parent 1" title="parent 1" selectable={false}>
            <TreeNode value="A" title="A" selectable={false}>
              <TreeNode value="leaf1" title="my leaf" />
              <TreeNode value="leaf2" title="your leaf" />
            </TreeNode>
          </TreeNode>
          <TreeNode value="parent 2" title="parent 2" selectable={false}>
            <TreeNode value="B" title="B" selectable={false}>
              <TreeNode
                value="sss"
                title={<b style={{ color: "#08c" }}>sss</b>}
              />
            </TreeNode>
          </TreeNode>
        </TreeSelect>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById("container"));

stackblitz link

App URL

我正在尝试执行以下操作：

第一次点击展开/折叠选项按钮

第二次点击展开/折叠选项按钮

【问题讨论】：

标签： javascript reactjs antd ant-design-pro

【解决方案1】：

我找到了这个问题的解决方案。

所以需要移除组件，再次需要添加组件。

 expandCollapseOpions = async () => {
    await this.setState({
      isExpandCollpase: !this.state.isExpandCollpase
    });
    await this.setState({
      isExpandCollpase: !this.state.isExpandCollpase
    });
  };

DOM 条件

{this.state.isExpandCollpase ? (
          <TreeSelect
            showSearch
            multiple
            style={{ width: "100%" }}
            value={this.state.value}
            dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
            placeholder="Please select"
            allowClear
            onChange={this.onChange}
            labelInValue={true}
          >
            <TreeNode value="parent 1" title="parent 1" selectable={false}>
              <TreeNode value="A" title="A" selectable={false}>
                <TreeNode value="leaf1" title="my leaf" />
                <TreeNode value="leaf2" title="your leaf" />
              </TreeNode>
            </TreeNode>
            <TreeNode value="parent 2" title="parent 2" selectable={false}>
              <TreeNode value="B" title="B" selectable={false}>
                <TreeNode
                  value="sss"
                  title={<b style={{ color: "#08c" }}>sss</b>}
                />
              </TreeNode>
            </TreeNode>
          </TreeSelect>
        ) : null}

stackblitz link

【讨论】：