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

随机推荐

Kubernetes的三种外部访问方式：NodePort、LoadBalancer和Ingress（转发）
原文 http://cloud.51cto.com/art/201804/570386.htm Kubernetes的三种外部访问方式:NodePort.LoadBalancer和Ingress 最近 ...
打造高效的工作环境 – SHELL 篇
注:本文由雷俊(Javaer/Emacser)和我一起编辑,所以文章版权归雷俊与我共同所有,转载者必需注明出处和我们两位作者.原文最早发于酷壳微信公众号,后来我又做了一些修改,再发到博客这边. 程序员 ...
IIS Express 域认证问题(https://stackoverflow.com/questions/4762538/iis-express-windows-authentication)
option-1: edit \My Documents\IISExpress\config\applicationhost.config file and enable windowsAuthent ...
jar包冲突排解方法(sbt)
jar包依赖冲突,版本不兼容会导致各种各样的问题.这里推荐一款sbt插件用于查找项目中的jar包依赖关系,通过该插件可以轻松的看出某个jar包依赖哪些jar,以及某个jar被哪些jar所依赖.此外该插 ...
LeetCode 797. All Paths From Source to Target
题目链接:https://leetcode.com/problems/all-paths-from-source-to-target/description/ Given a directed, ac ...
YAML快速入门
https://www.jianshu.com/p/97222440cd08 我们学习Java,都是先介绍properties文件,使用properties文件配合Properties对象能够很方便的 ...
c# 访问共享文件
#region 连接共享文件夹 /// <summary> /// 连接共享文件夹 /// </summary> public bool ConnectToSharedFold ...
（Python基础）文件操作
对文件操作流程打开文件,得到文件句柄并赋值给一个变量通过句柄对文件进行操作关闭文件现有文件如下命名为7 years Once I was seven years old my momma t ...
（Python基础）列表的认知
以下是列表的一些知识点 name = ['关羽','张飞','刘备','曹操','诸葛亮','吕布',['吕布','吕布',],'吕布','吕布','吕布','吕布']for i in name: p ...
[持续交付实践] pipeline使用：Shared Libraries
前言随着pipeline交付流水线在团队中的推广,使用pipeline脚本的job也迅速增加.虽然我们已经基于公司的技术栈特点做了一个尽可能通用的pipeline脚本样例,让搭建者只需要修改几个赋值 ...

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

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

随机推荐

热门专题