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

1.antd Upload默认值问题

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

坑爹之路漫漫-----

图为无默认值时状态

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

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

<Upload

accept="image/*"

listType= 'picture'

beforeUpload={this.beforeUpload}

defaultFileList={fieldValue?[{

uid:"-1",

status: 'done',

url: `/file-server/${fieldValue}`,

}]:""}

onChange={this.handleChange}

{

this.state.fileList.length>=1?"":<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';

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

searchValue=(e)=>{

const columns=this.props.columns

const dataSource=this.props.dataSource

const txt=e.target.value

const data=[]

columns.map((item)=>{

const fieldName=item.fieldName;

if(fieldName && fieldName.indexOf("封面")===-1){

if(e.target.value){

data.push(...dataSource.filter(item=>item[fieldName].indexOf(txt)>-1))

}else{

if(data.indexOf(...dataSource)===-1){

data.push(...dataSource)

}

item["render"]=(text) => (<Highlighter

highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}

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

转载于:https://www.cnblogs.com/NatChen/p/10192001.html

我们一起踩过的坑----react（antd）（二）相关推荐

[react] 在使用react过程中你都踩过哪些坑？你是怎么填坑的？
[react] 在使用react过程中你都踩过哪些坑?你是怎么填坑的? 组件不像Vue一样有(beforeRouteLeave, beforeRouteEnter)路由守卫 Hooks中的闭包渲染问题 ...
React+antd在线上动态更换皮肤主题
开始因为项目里一个更换皮肤的功能,虽然antd官网给出了更改主题的方法,但那是静态的,没办法在线上更换,然后发现网上在这方面的资料也并不多,这个业务难道不是应该很普遍吗?然后我就花了一些时间去解决了 ...
[vue] 有在vue中使用过echarts吗？踩过哪些坑？如何解决的？
[vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的? vue 没用过echarts react到是用过不过我想应该差不多 ,多注意dom的渲染时机和chart的实例化时机在相 ...
引入antd组件样式_个人作品：一个技术栈koa2+ mysql+react + antd的个人博客
前言此项目是个人博客,有前端界面+后台管理系统:目的是当做react和node的练手项目,同时还可以了解到服务器nginx部署web站点以及备案和域名的基本操作流程. 项目预览地址 https:// ...
使用 Typescript 踩 react-redux 的坑
背景最近在看antd源码,也在自学一些typescript的语法以及使用,然后准备带在学校的师弟做一个音乐播放器作为typescript的练习踩踩坑: 然后竟然没想到在项目刚开始就深陷大坑--搭建r ...
React爬坑之路二：Router+Redux
上一篇写了Antd和Axios的基本操作之前大标题到五了那么这篇从六开始 ST也是初学小白可能讲的完全不对大家当做小说随便读读消遣一下就好 React官网:https://reactjs.org/ ...
基于React + Antd 实现的斗兽棋web应用
基于React + Antd 实现的斗兽棋web应用项目简介功能规划项目源码棋盘渲染 mapitem gamemap(部分) map.json 棋子移动 && 规则特性 &am ...
mac git使用与配置踩过的坑
#mac git使用与配置踩过的坑标题mac配置git ssh密钥参考链接mac配置git ssh key go get安装失败的解决方法 go get约等于git clone+go instal ...
java项目经理也就那么回事_网易PM | 我们之前在需求评审环节踩过的坑...
原本觉得需求评审也就那么回事儿,大家应该都差不多这么做的,没啥好说的.不过前不久有一位同学问起来我们是怎么做需求评审的,然后发现有一些团队的做法可能还不大一样,他们也还踩着我们之前踩过的坑,他们还在探 ...
Redis 集群部署及踩过的坑
本文目标要在单台机器上搭建Redis集群,方式是通过不同的TCP端口启动多个实例,然后组成集群,同时记录在搭建过程中踩过的坑. 安装准备 centos版本:6.7 redis版本:3.2.3 安装方 ...

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

我们一起踩过的坑----react（antd）（二）相关推荐

最新文章

热门文章