[英]How to create collapse expand list in react
我尝试使用以下标准在React (v 16.5)
中创建折叠和展开侧菜单 -
在页面加载时,第一项(通告)将在展开视图中。 任何一个项目都可以一次展开,例如,如果用户单击第二个项目(规格),第一个项目将折叠。 我还想要一些 CSS animation 在折叠/展开事务期间,例如平滑地向下/向上每个项目的主体部分并更改箭头图标。 我的方法是在每个项目( sidebar-nav-menu-item
)上动态添加/删除 CSS class ,例如-
sidebar-nav-menu-item item-active
因此,当一个项目处于展开视图时,它应该像上面的 class 并在它处于折叠视图时删除item-active
。 默认情况下,当 item 处于折叠模式时,body div
(sidebar-nav-menu-item-body) 应该通过 CSS 隐藏。
import React, { Component } from 'react';
className SidebarNavs extends React.Component{
constructor(props) {
super(props);
}
render() {
return(
<div className="sidebar-nav">
<div className="sidebar-nav-menu">
<div className="sidebar-nav-menu-item" data-id="circulars">
<div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}>
<div className="sidebar-nav-menu-item-head-title">Circulars</div>
<div className="sidebar-nav-menu-item-head-help">
<button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
</div>
<div className="sidebar-nav-menu-item-head-icon">
<i className="fa fa-caret-down" aria-hidden="true"></i>
</div>
</div>
<div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
</div>
<div className="sidebar-nav-menu-item" data-id="specifications">
<div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}>
<div className="sidebar-nav-menu-item-head-title">Specifications</div>
<div className="sidebar-nav-menu-item-head-help">
<button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
</div>
<div className="sidebar-nav-menu-item-head-icon">
<i className="fa fa-caret-down" aria-hidden="true"></i>
</div>
</div>
<div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
</div>
<div className="sidebar-nav-menu-item" data-id="wo">
<div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}>
<div className="sidebar-nav-menu-item-head-title">Work Orders</div>
<div className="sidebar-nav-menu-item-head-help">
<button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
</div>
<div className="sidebar-nav-menu-item-head-icon">
<i className="fa fa-caret-down" aria-hidden="true"></i>
</div>
</div>
<div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
</div>
</div>
</div>
)
}
}
export default SidebarNavs;
CSS:
.sidebar-nav-menu-item{
display:block;
}
.sidebar-nav-menu-item-body{
display:none;
}
.sidebar-nav-menu-item.item-active .sidebar-nav-menu-item-body{
display:block;
}
您应该使用 state 变量来显示您的可折叠项目处于活动/非活动状态。
我稍微修改了您的代码以使其符合您的要求。
class App extends Component {
constructor() {
super();
this.state = {
activeCollapse: 'circulars'
};
}
handleExpandCollaps = (name) => {
if (this.state.activeCollapse === name) {
this.setState({ activeCollapse: '' })
} else {
this.setState({ activeCollapse: name })
}
}
moreInfoClick = (e) => {
e.stopPropagation();
console.log("clicked");
}
render() {
return (
<div>
<div className="sidebar-nav">
<div className="sidebar-nav-menu">
<div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "circulars" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("circulars")} data-id="circulars" >
<div className="sidebar-nav-menu-item-head">
<span className="sidebar-nav-menu-item-head-title">Circulars</span>
<span className="sidebar-nav-menu-item-head-help">
<button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
</span>
</div>
<div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
</div>
<div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "specifications" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("specifications")} data-id="specifications">
<div className="sidebar-nav-menu-item-head">
<span className="sidebar-nav-menu-item-head-title">Specifications</span>
<span className="sidebar-nav-menu-item-head-help">
<button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
</span>
</div>
<div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
</div>
<div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "wo" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("wo")} data-id="wo">
<div className="sidebar-nav-menu-item-head">
<span className="sidebar-nav-menu-item-head-title">Work Orders</span>
<span className="sidebar-nav-menu-item-head-help">
<button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
</span>
</div>
<div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
</div>
</div>
</div>
</div>
);
}
}
注意:我使用CSS
来制作font-awesome
图标。 希望你添加了font-awesome
为此,我将使用React.useState
,因为它是一个小的 state 来控制和动画我会使用 CSS:
该组件将如下所示:
function SidebarNavs() {
const [activeItem, setActiveItem] = React.useState(1);
return (
<div className="sidebar-nav">
<div className="sidebar-nav-menu">
<SidebarItem
title="Circulars"
setActiveItem={setActiveItem}
index={1}
activeItem={activeItem}
>
Sidebar Content Here
</SidebarItem>
<SidebarItem
title="Specifications"
setActiveItem={setActiveItem}
index={2}
activeItem={activeItem}
>
Sidebar Content Here
</SidebarItem>
<SidebarItem
title="Specifications"
setActiveItem={setActiveItem}
index={3}
activeItem={activeItem}
>
Work Orders
</SidebarItem>
</div>
</div>
);
}
function SidebarItem({ title, children, setActiveItem, activeItem, index }) {
const expanded = activeItem === index;
const cls = "sidebar-nav-menu-item " + (expanded ? "item-active" : "");
return (
<div className={cls}>
<div className="sidebar-nav-menu-item-head">
<div className="sidebar-nav-menu-item-head-title">{title}</div>
<div className="sidebar-nav-menu-item-head-help">
<button
type="button"
className="btn-help"
onClick={() => setActiveItem(index)}
>
View more info
</button>
</div>
<div className="sidebar-nav-menu-item-head-icon">
<i className="fa fa-caret-down" aria-hidden="true" />
</div>
</div>
<div className="sidebar-nav-menu-item-body">{children}</div>
</div>
);
}
CSS 看起来像这样:
.sidebar-nav-menu-item {
border: 1px solid #CCC;
margin-bottom: 20px;
}
.sidebar-nav-menu-item .sidebar-nav-menu-item-body {
overflow: hidden;
max-height: 0;
transition: all linear 0.5s;
}
.sidebar-nav-menu-item.item-active .sidebar-nav-menu-item-body {
max-height: 100px;
transition: all linear 0.5s 0.3s;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.