我想通过单击一个按钮来展开/折叠所有内容。
使用reactstrap并使用容器(index.js)中创建的组件创建了一个新的CollapsiblePanel组件。
现在,我可以通过单击按钮来展开/折叠所有容器。
https://codesandbox.io/s/fervent-banzai-s9pst
CollapsiblePanel.js
import React,{ useState,useEffect } from "react";
import { Collapse } from "reactstrap";
function CollapsiblePanel({ children,...props }) {
const { title,collapse } = props;
const [isCollapse,setIsCollapse] = useState(collapse);
const [icon,setIcon] = useState("fa fa-chevron-down");
const toggle = () => {
setIsCollapse(!isCollapse);
setIcon(state => {
return state === "fa fa-chevron-down"
? "fa fa-chevron-right"
: "fa fa-chevron-down";
});
};
useEffect(() => {
toggle();
},[collapse]);
return (
<div classname="coll-panel">
<button
type="button"
classname="coll-panel-btn btn-primary btn-block text-left"
onClick={() => toggle()}
>
<i classname={icon} /> {title}
</button>
<Collapse classname="border text-left p-2" isOpen={isCollapse}>
{children}
</Collapse>
</div>
);
}
CollapsiblePanel.defaultProps = {
children: "Add node as a child",title: "Collapsible Panel",collapse: true
};
export default CollapsiblePanel;
index.js
import React,{ useState } from "react";
import ReactDOM from "react-dom";
import CollapsiblePanel from "./component/CollapsiblePanel";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
function App() {
const text =
"Lorem ipsum dolor sit amet consectetur adipisicing elit.Nihil earum illo ipsa velit facilis provident qui eligendi,quia ut magnam tenetur. accusantium nisi quos delectus in necessitatibus ad. Ducimus,id!";
const [collapse,setCollapse] = useState(true);
const [title,setTitle] = useState("Expand All");
const [icon,setIcon] = useState("fa fa-chevron-right");
const collapseAll = () => {
setCollapse(!collapse);
setIcon(state => {
return state === "fa fa-chevron-right"
? "fa fa-chevron-down"
: "fa fa-chevron-right";
});
setTitle(state => {
return state === "Expand All" ? "Collapse All" : "Expand All";
});
};
return (
<div classname="App container my-2">
{/* Expand/Collapse All */}
<button
type="button"
classname="btn-warning mt-4 mb-3 float-left"
onClick={collapseAll}
>
<i classname={icon} /> {title}
</button>
<CollapsiblePanel title="Title 1" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 2" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 3" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 4" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 5" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
</div>
);
}
现在: 在单击全部展开/折叠按钮之前,如果单击了可折叠容器(在index.js中),然后单击“展开/折叠”按钮,则并非所有容器都在展开。
打开的门正在关闭,反之亦然。
预期:
尽管已显式打开/关闭容器。在单击“展开/折叠”时,我要全部展开/折叠。预先感谢。