我们一起踩过的坑----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

随机推荐

51nod1227 平均最小公倍数
$Ans(l,r)=ans(r)-ans(l-1)\\ans(n)=\sum\limits_{i=1}^n \sum\limits_{j=1}^i \frac{j}{gcd(i,j)}\\=\sum\ ...
C# 6.0：Auto-Property initializer
在之前的开发中,属性只能在构造函数中进行初始化,如果它有定义一个后台字段的话,那这个字段就就可以在定义的地方初始化.C# 6.0 引进了一个Auto-Property initializer机制使属性 ...
php变量函数
这个东西相当于C语言中的函数指针,C#里的委托 function come() { //定义com函数 echo "来了<p>" ...
mysql error(2003) 10060的再解决
前段时间在window虚拟机上处理过这样的问题现在在linux上也遇到了这样的问题一项一项的排查 1.网络问题,ping的通但是telnet (ip) (端口号)失败,telnet(ip)都失败 ...
C#6.0新语法
.自动属性初始化的改进(有用) 原来的用法(声明时无法同时初始化),例如: class MyClass { public int Age { get; set; } public string Nam ...
iOS移动开发CoreDate讲解
----欢迎------- 在移动端开发,数据持久化保存是基本要素,没钱在2014年之后退出了coredate,本持久化基于oc作为开发,方便程序人员操作.与SQL数据库,MySQL相比,优点颇多. ...
Java高级框架------Spring（二）
五．如何给Bean的属性赋值(注入) 1. 通过构造方法来赋值 2. 设置注入(通过set方法) 2.1 如果属性是基本类型或String等简单 <bean id="peo" ...
Windows环境下在sublime text3配置C编译环境
1. 检查本机有没有安装GCC,没有的话先进行安装 2. 选择 sublime 的Tools->Build System->New Build System,建立配置文件,文件命名为C.s ...
CentOS7下安装Redis5.0.2
1.下载redis 地址 http://download.redis.io/releases/redis-5.0.2.tar.gz 2.解压tar -zxf redis-5.0.2.tar.gz 3. ...
oracle入坑日记<二>认识oracle（含sqlplus基础使用）
1.SID(数据库实例) 1.1. oracle安装的时候有一项叫[全局数据库名]的填写项,这个就是oracle的SID也是数据库的唯一标识符: 1.2.一个oracle数据库有且只有一个SID(一般 ...

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

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

随机推荐

热门专题