html5中折叠面板,Ant Design中折叠面板Collapse
这段时间做react项目遇到一些平常并不会去在意的问题,但解决的时候又需要思考一番。这次开发用到了蚂蚁金服的UI框架Ant Design。项目中有一个模块的样式和功能用到了折叠面板Collapse组件来实现。但是开发完成后有一个问题被产品提到了。
问题是这样的,因为我们有一个公告展示的列表,是分页展示的,当用户在第某一页面打开一个或多个面板并且没有关闭就去点击其他的页码,当他再次返回到当前页面时折叠面板仍然是展开的。产品的要求是当用户在某一页打开折叠面板,从别的页面再次回来的时候要求折叠面板都关闭。我感觉这个并不影响什么,既然产品提出来了我们就要着手解决他。
翻看了官方文档提供的API动手实践了一下发现可以通过activeKey(数字数组/字符串数组)属性和事件onChange来实现。接下来我们来看看实现的方法(可能还有很多更好的方法,我目前只想到了这一种,有更好实现的大佬希望可以指教,感谢!)。在这个项目中用的react的新特性hooks,而且由于消息分类页面有好几个所以是把Collapse抽离出来一个组件,所以涉及到了组件之间的传值。
抽离的Collapse(子组件)组件:
import React, { useState } from "react";
import { Collapse } from "antd";
import Templatelist from "components/notice/listDom";//这个是面板header内容根据自己项目来定
interface props {//项目用到了ts
dataList: any;//父组件传过来的消息数据
changeKeys: Function;//父组件传过来的方法
keys?: Boolean;//父组件传过来的一个boolean类型的值,用它来控制面板是否折叠,注意:true表示折叠,false表示展开
}
export default function noticeCollapse({ dataList, changeKeys, keys }: props) {
const { Panel } = Collapse;
let [key, setKey] = useState([]);//声明了一个状态key用来存储展开的面板
function handleKeyChange(e) {//实现Collapse自带的onChange方法
changeKeys(false);//触发面板的onChange时设置父组件的show为false,即此时activeKey的值为key
setKey(e);存储当前点开的面板值到key中
}
return (
expandIconPosition="right"
activeKey={keys ? [] : key}//如果keys为true设置面板展开数量为空,即都折叠
onChange={handleKeyChange}
>
{dataList && dataList.length > 0
? dataList.map(item => (
header={}
key={item.messageId}
>
className="contentW"
dangerouslySetInnerHTML={{ __html: item.content }}
>
))
: ""}
);
}
引用Collapse的组件(父组件)
import React, { useEffect, useState } from "react";
import Layout from "components/layout";//项目公共布局组件
import { Noticelist, PaginationBox } from "components/ui/notice";//公共样式组件
import { Pagination } from "antd";//antd分页组件
import MangeVoid from "components/manage/manage-void";//若消息为空展示的空页面组件
import { getMgMsg } from "api/notice";//获取数据的方法
import NoticeCollapse from "components/notice/collapse";//引入抽离的Collapse组件
function NoticeBaseInfo() {
let [show, setShow] = useState(false);//控制面板的折叠隐藏,需要传给抽离的Collapse组件
const [allMsg, setmgMsg] = useState({//存放消息数据
total: 0,
list: [],
pageSize: 10,
pageNum: 1
});
let [isvoid, setVoid] = useState(false);//这个作用是为了在异步加载数据时防止空页面闪一下
let initMsg = pageNum => {
getMgMsg("", pageNum, allMsg.pageSize).then(res => {
if (res.msg == "success" && res.data) {
setmgMsg({ ...res.data, pageNum });
if (!isvoid) {
setVoid(true);
}
}
});
};
useEffect(() => {
initMsg(allMsg.pageNum);
}, []);
function handleChange(page) {//分页方法
initMsg(page);
setShow(true);//当点击分页的时候我们设置show为true,即让面板都折叠
}
return (
{isvoid && allMsg.list.length == 0 ? (
) : (
dataList={allMsg.list}
keys={show}//把show传给子组件
changeKeys={(status) => setShow(status)}//接收子组件传来的值,并赋值给show
>
)}
{allMsg.total > 10 ? (
showSizeChanger={false}
current={allMsg.pageNum}
total={allMsg.total}
hideOnSinglePage={true}
onChange={handleChange}
>
) : (
""
)}
);
}
export default NoticeBaseInfo;
html5中折叠面板,Ant Design中折叠面板Collapse相关推荐
- Ant Design中Form组件重置验证条件resetFields()方法
Ant Design中Form组件重置验证条件resetFields()方法 需求, 实际完成时间(与任务生成日期联动,若任务生成日期选上,实际完成时间禁选) 却发现在验证完之后填写实际完成时间后任务 ...
- Ant Design 中覆盖组件样式
使用场景: 比如ant design中的抽屉Drawer这个组件,由于组件库中的样式是给了padding为25px,但是我当前的需求是不需要padding,那么就需要写样式覆盖掉之前组件定义的样式. ...
- ant Design 中使用 :globa
ant Design 中使用 :global 问题描述 接触 antd 项目,发现样式里面有 :global 写法,研究一下 问题结果 :global 其实是 css module 的一种写法,被其包 ...
- Ant Design中select框往下滑动会自动回到顶部的问题
问题重现: 用户在使用如下图所示的选择框时,在向下滑动时,鼠标再次移动,滑竿会自动回到顶部. 代码定位: 问题分析: 获取到的dataFromOptions中是以key,value形式存在的. 而当选 ...
- 蚂蚁金服 ant design 中下载axure 菜单组件库
下载地址为:https://library.ant.design/
- antd中tooltip换行_ant design 中实现表格头部可删除和添加
我是用antd pro做一个项目.有一个小需求是表格头部栏可操作.具体是表头的每一项都带一个"x"按钮,当不想展示这一栏的时候,直接点"x",这一栏就不展示了. ...
- ant design中的栅格化系统
antd design在原12栅格系统的基础上,将整个设计区域进行24等分,Row代表行,Col代表列 通过Row的gutter属性设置Col与Col之间的间隔,响应式设置 { xs:8,sm:16, ...
- react学习(60)--ant design中getFieldDecorator
<From><FormItem>//JS代码书写时需要用 { } 包裹起来,不能直接写在代码块中 {getFieldDecorator('userName',{initialV ...
- oracle中showTime用法,ant design vue中日期选择框混合时间选择器的用法
首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: 其中,showTime.defaultValue是设置的默认展 ...
最新文章
- 您知道为何要采用固定的迭代周期吗
- Discuz在线升级中的SC和TC分别是什么意思?
- 大数据新手的0基础学习路线,从菜鸟到高手的成长之路
- ffmpeg录屏鼠标闪烁问题解决方法
- 基于 Serverless 打造如 Windows 体验的个人专属家庭网盘
- 因为计算机中丢失ssce5432.dll,ssce5432.dll 64位
- redis 客户端_你在使用什么 Redis 客户端工具?
- 性能测试之二——性能测试的流程
- css 历史及css3 新特性
- 吴恩达机器学习作业二——逻辑回归
- linux+awk过滤端口,Awk简单过滤[1]
- MATLAB中肤色分割算法_基于MATLAB的车牌字符分割问题
- .NET: 如何在宿主中动态加载所有的服务
- 金橙子打标卡二次开发应用
- 手机传感器数据导出_旧手机先别扔丨简单改造秒变黑科技监测器
- sg11解密 php解密 SourceGuardian解密sg_load解密去除域名IP授权
- 3dmax渲染是用云渲染好还是自己电脑渲染好?
- 腾讯云静态网站托管基本操作
- Java毕业设计-音乐管理系统
- 育儿说: 每天给孩子吃牛肉, 坚持半年有什么效果? 医生说了大实话
热门文章
- ubuntu18.0.4 不能下载 libgd2-dev(ubuntu 20.04 安装perl 中GD 模块失败的解决办法)
- 关于摄像头的一些零碎知识
- C++类内存结构布局
- PHP培训选云和数据,送给云和数据郑州分中心PHP培训班全体学员的祝福
- git 上下载的项目在本地安装依赖时报错 Could not resolve dependency
- python xposed_Xposed及类Xposed框架收集
- open表和closed表_excel工作表合并,多文件数据一键合成
- java 限制并发数_限制并发请求数aiohttp
- 【完成整理】45套很酷的长影影 LOGO 设计
- BEM思想之彻底弄清BEM语法