如何在单击按钮时折叠和展开 antd TreeSelect 项目?
How to collapse and expand antd TreeSelect items on click of a button?
我正在使用 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"));
我正在尝试执行以下操作:
第一次单击 Expand/Collapse 选项按钮时
第二次单击 Expand/Collapse 选项按钮
我找到了这个问题的解决方案。
因此需要删除组件并再次添加组件。
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}
我正在使用 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"));
我正在尝试执行以下操作:
第一次单击 Expand/Collapse 选项按钮时
第二次单击 Expand/Collapse 选项按钮
我找到了这个问题的解决方案。
因此需要删除组件并再次添加组件。
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}