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

随机推荐

必做课下作业MyCP
20175227张雪莹 2018-2019-2 <Java程序设计> 必做课下作业MyCP 要求编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支 ...
在linux中输出每个group的用户成员
先提供使用文件一步一步获取相关信息: 1. 获取所有的用户: awk -F: '{print $1 > "1.txt"}' /etc/passwd 2. 获取每个用户, 及其 ...
Delphi 7启动后提示Unable to rename delphi32.dro的解决办法
在Win10 64 上安装完Delphi 7,每次打开报错: Unable to rename 'C:\Program Files (x86)\Borland\Delphi7\Bin\delphi32 ...
IE高级配置中，存在SSL支持协议，例如SSL TLS。
IE高级配置中,存在SSL支持协议,例如SSL TLS. 其在注册表的路径为:HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\I ...
为什么vue支持IE9以上的IE浏览器？
原因如下: 1.vue框架中核心的双向绑定原理是利用Object.defineProperty()方法实现的. 2.该方法第一个被实现是在IE8中,但是存在诸多限制:只能在DOM对象上使用这个方法,而 ...
JAVA发送HttpClient请求及接收请求结果
1.写一个HttpRequestUtils工具类,包括post请求和get请求 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2 ...
bootstrap的使用集锦
在使用div样式的时候可以根据页面布局来调整大小 <div class="col-md-8 col-md-offset-3"># col-md-8 div所占的空间大小 ...
[UnityShader基础]07.MaterialPropertyDrawer
参考链接: https://blog.csdn.net/e295166319/article/details/60141677 https://docs.unity3d.com/ScriptRefer ...
【机器学习_11】基础算法：KNN
一.概述 1.方向 2.一句话概述 3.优缺点 4.应用场景举例二.理论三.案例理解
一文读懂PRBS定义、生成办法、作用
对于眼图测试.误码率和抖动容限测试,最常用的测试码是PRBS,主要有PRBS7.PRBS15.PRBS23和PRBS31.本文主要解释了PRBS的定义,生成方法以及简单应用. PRBS定义二进制序列 ...

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

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

随机推荐

热门专题