我们一起踩过的坑----react（antd）（二）

NatChen 2024-08-08 18:04:03 原文

1.antd Upload默认值问题

需求是这样的，后台若没有图片默认值，则只有上传按钮，且只能上传一张图片；若有默认值，则显示默认头像图片，可删除，删除之后有且只能添加一张图片，没有删除默认图片时不能添加图片

坑爹之路漫漫-----

图为无默认值时状态

图为有默认值状态，删除后可添加图片

首先设置defaultFileList,但是defaultFileList并不会默认添加到fileList里面

?"":<Button style={{width:this.props.width}}>

<Icon type="upload" /> 点击上传

</Button>

}

</Upload>

2.antd表格筛选问题

antd官网上 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel

只有单列表格筛选的栗子，并没有全部表格筛选功能，坑爹啊~

需求如下：在右上角搜索，所有列搜索

首先是布局，因为我用了<Card>，所以用了extra属性，添加了一个input框，

<Card

title={cardTitle}

id={cardTitle}

className="hoverable"

headStyle={{background:"#f2f4f5"}}

extra={this.props.type==="detail"?<Input placeholder="关键字搜索"

onChange={this.searchValue}

addonBefore={<Icon type="search"/>}

/>:""}

</Card>

在引入react-highligt-words插件

import Highlighter from 'react-highlight-words';

还要去除封面和序号的干扰，直接上代码，写的不好

){

))

}){

}}

searchWords={[this.state.searchText]}

autoEscape

textToHighlight={text.toString()}

/>)

}

return false

})

this.setState({

searchText:e.target.value,

dataSource:data

})

}

如果input框有数据输入，用filter筛选，push进data，再将data赋给页面渲染

如果input为空，即不用筛选，将所有数据都显示出来，最后实现效果如图：

3.antd模态框组件更新问题

不知道大家有没有遇到过这种情况，第一次加载模态框，数据很好的显示出来了，第二次再点击别的模态框的时候，呈现的还是第一次加载的数据，这是为什么呢？？？

之后各种去翻数据，传的是否有问题，但是显示数据没问题，后来在 componentDidMount中加入输出，监测到模态框只在第一次加载的时候更新数据，第二次加载其实是没有加载的，究其原因，其实是因为你点击关闭模态框的时候，只是隐藏了模态框，并没有销毁组件····坑

解决方法：在modal中加入destoryOnClose,问题迎刃而解啦，哈哈哈哈哈

<Modal

title={this.props.title}

visible={this.props.visibleForm}

onOk={this.handleOk}

onCancel={this.props.handleCancel}

okText="确认"

cancelText="取消"

destroyOnClose

我们一起踩过的坑----react（antd）（二）的更多相关文章

我们一起踩过的坑----react（antd）（一）
1.}] && ){ ){ ){ ||){ ){ );); , }; }); }, beforeUpload: (file) => { ...
react + antd 实现打印功能（踩了不少坑）
最近在有网页打印需求,尝试了一下react的打印功能,遇到了不少的坑: 1.react本身有一些打印的组件,但都不好用,都是基于window.print(),但是window.print()如果直接打 ...
React+Antd遇到的坑
第一次尝试React+antd,发现果然不愧是传说中的坑货,一个又一个坑.必须要记录. react + antd,都是最新版本,使用npm和yarn各种add,build,start 1. 资源文件, ...
webpack+react+antd 单页面应用实例
React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...
项目中踩过的坑之-sessionStorage
总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...
web开发实战--弹出式富文本编辑器的实现思路和踩过的坑
前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...
"开发路上踩过的坑要一个个填起来————持续更新······（7月30日）"
欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...
【转载】Fragment 全解析（1）：那些年踩过的坑
http://www.jianshu.com/p/d9143a92ad94 Fragment系列文章:1.Fragment全解析系列(一):那些年踩过的坑2.Fragment全解析系列(二):正确的使 ...
Redis Cluster踩过的坑
Redis Cluster踩过的坑请参考如下链接:http://www.iteye.com/blogs/subjects/Redis_Cluster_Devops

随机推荐

ES - Index Templates 全局index模板
1.Index Templates 之前我们聊过Dynamic template,它作用范围是特定的Index,如果我们想针对全局Index进行设置该如何操作呢? Index Templates 可以 ...
php中cookie和session的总结
cookie: 设置cookie: setcookie("name","zhang","time()+3600"); 参数一:属性名参数 ...
OkGo3.0 --真实项目使用和二次封装(转)
转载:https://blog.csdn.net/jiushiwo12340/article/details/79011480 11.OkGo3.0真实项目使用和二次封装: ==== 11.OkG ...
MySQL MGR+ Consul之数据库高可用方案
背景说明: 基于目前存在很多MySQL数据库单点故障,传统的MHA,PXC等方案用VIP或者DNS切换的方式可以实现.基于数据库的数据强一致性考虑,采用MGR集群,采用consul服务注册发现 ...
使用iptables基于MAC地址进行访控
近日完成一台基于CentOS的SVN服务器配置,由于该服务器上的文件非常重要,仅部分用户需要访问,最后决定采用iptables来做访控,并且是根据MAC地址来限制,为了便于后期维护,防火墙的配置是通过 ...
mybatis缓存的设计
继续用提问的方式来看Mybatis的缓存设计. 1.Mybatis如何开启缓存 Mybatis对查询结果进行缓存,所以缓存的对象为具体的Statement 通过在Statement上是否使用缓存来启用 ...
oracle_hc.sql
select event,count(1) from gv$session group by event order by 2;exec dbms_workload_repository.create ...
python-封装方法用于读取excel
1.实现获取excel某张表的行数.单元格数据 #coding=utf-8 import xlrd #获取excel文件 data = xlrd.open_workbook('file_path/xx ...
sql脚本过大，无法打开的解决方法
打开cmd命令窗口,输入如下命令: sqlcmd -S ipaddress -U user -P password -d dbname -i file 其中,ipaddress是数据库服务器ip,us ...
command not found所有执行命令总是报找不到
输入 ll命令提示: bash: ls: 未找到命令… 相似命令是: 'lz' 原因: 环境变量PATH被修改了解决办法: 执行: export PATH=/bin:/usr/bin:$PATH ...

我们一起踩过的坑----react（antd）（二）

我们一起踩过的坑----react（antd）（二）的更多相关文章

随机推荐

热门专题