all_might1的博客

最近在升级antd，整出来一些奇奇怪怪的问题。本地功能是完全正常的没有其他问题，上到测试环境就不可以了。这事儿搞了几天，心态爆炸属于是最后看了antd的更新日志，发现4.18.0改了Table的某些内容，感觉很有可能和这个有关。把antd版本降下来，发到环境上终于好了。如果本地功能都是正常的，发到环境上有问题，也许是antd版本的问题可以看一下日志，降版本，版本太高不稳定...

想直接看解决方法，目录中就有简述目录一、问题描述二、解决方案方案一（官方）： 使用setFieldsValue来进行更新方案二：调用resetFields()方法，对表单进行重置一、问题描述需求使用了Form+Table。在第二次点击编辑的时候就会展示上一次点击那条的内容。在这个地方是复用了Form.Item，这部分会产生数据残留的问题，估计是不是存在了树里面。官方对于这种问题有给出解决方法二、解决方案在这边说两个解决方法，一个..

这段时间在前端整合，升级了React和antd的版本。当时的我，还不知道自己即将经历什么，也不知道自己到底打开了怎么一个巨大的潘多拉魔盒。v3升级v4的文档，都快看出包浆来了，还是遇到各种各样、离离谱谱、奇奇怪怪的问题，心态大面积爆炸。最近遇到一个特别离谱的问题。在本地连测试环境功能完全正常，一上到测试环境就有问题。（关键是研发环境还不能发）出现的问题是可编辑单元格Table组件，点击编辑按钮，死活不再去判断置灰其他行并且出现确认、...

一、问题描述升级antd到4.x之后，官网文档上发现没有提及initialValue，于是使用了defaultValue。改组件设置初始值，从接口调入。页面初始进入接口没有返回的时候，对应数组数据为空；等到接口返回数据后，对应数组也塞入正确数据，但是Select组件展示表现还是为空。（我用的是多选）二、解决思路因为之前解决过一个 打开列表中不同Drawer，展示数据不变化的问题。所以联想，会不会是在页面...

目录一、问题产生背景二、问题解决思路三、解决方案一、问题产生背景升级antd从3.x到4.x，重构页面。有些代码在3.x可以正常跑，但在4.x就会有形形色色、奇奇怪怪的问题。这次就是关于Table组件复选的问题。表现为，选择其中一行内容，却一下子全选了当页所有的数据，有时又会突变成选不中。如下图二、问题解决思路 从表现看不出来有什么问题，于是先打印了下 rowSelection 的 selectedRo...

不想看长篇大论，直接从目录跳转到解决方案即可目录一、问题背景二、解决思路三、-webkit-fill-available 详解四、解决方案一、问题背景 antd升级到v4之后，伴随着一些奇怪的问题，在v3的时候没有出现 我遇到的是 InputNumber 组件，需要重写覆盖它的样式。但是使用了antd v4新覆盖方式还是不起作用。一筹莫展二、解决思路尝试多种方法...

目录一、问题背景二、解决思路三、解决方案一、问题背景 antd组件库升级，有些地方不兼容或是类名变更导致一些奇怪的问题 这次遇到的问题是，用了Input中inputNumber类型的组件。可是给其设置width失效，于是想着找下什么原因导致的二、解决思路 看了下元素，发现新版本给其设置了默认的width： 90px，我设置的width直接失效 所以应该把其默认设置的宽度给覆盖掉...

一、Select组件覆盖对应名称变更antd从3.x升级到4.x之后，某些组件因为版本升级后原有的样式类名进行了改动。 在涉及到样式覆盖重写的情况下，改动样式类名的组件需要根据原有的样式，对当前版本组件的样式改写 Select组件类名就发生了变化，对应名称从 ant-select-selection 变更为 ant-select-selector二、覆盖方式antd从3.x升级到4.x后，想要覆...

一、Icon引入方式变更从直接对其在antd引入Iconimport { Icon } from 'antd'变更为从 @ant-design/icons 引入 对应的名称代码如下：import { LeftOutlined } from '@ant-design/icons'二、Icon使用方式变更使用时不再是在Icon组件api type中填写对应图标名称<Icon type="smile" />变更为...

如果不想看具体使用情况，我把解决方案写在最开头方案一：设置key值，new Date().getTime() 方案二：添加 destroyOnClose 属性目录一、问题描述二、解决方案方法一：设置key值方法二：destroyOnClose 属性一、问题描述表格table中每条数据有编辑操作，点击编辑按钮，右侧会弹出抽屉让用户进行编辑 是 antd 中 Table + Drawer + Form 以前...

目录一、问题描述二、详细解释三、解决方案一、问题描述 在进行代码编写的时候发现给antd的inputNumber组件设置width时，不生效。尝试多次无果后，问了同事，同事掏出了一个关键字 -webkit-fill-available 后成功生效。 所以对其产生了兴趣，在网上检索下，用的必应竟然没找到相关信息。（想起来了，不是必应检索不到，是因为过滤机制，在关键词前添加-起到过滤作用。）觉得这个属性值是两个字...

一、问题描述 需求要把从后端取到的数据放到table中展示，因为还没有联调，前后端都在各自开发各自的，于是我自己根据需要编了写伪数据填进去。结果就开始报错，Table.js:968 Uncaught (in promise) TypeError: data.slice is not a function。如下图：二、解决思路 看了下报错提示，在Table.js里，那就是Table组件使用出问题了。那么肯定就是里面填的值有问题呗。以下是我编的伪数...

不想看长篇大论，直接跳转到解决方案咩目录一、问题描述二、解决思路1、忆往昔峥嵘岁月稠（以前好像解决过????）2、正入万山圈子里，一山放过一山拦（居中但没完全居中????）3、柳暗花明又一村（前人坑我????）三、解决方案1、单独使用分页组件2、使用组件中分页api四、感想心情一、问题描述 接了一个以表格展示居多的需求，其中有关于table的分页展示内容。UI给的设计图中分页部分是居中展示的，但初始是居右侧展示所以样式需要修改

一、需求实现要求接到一个需求其中有个小，要求在页面中添加一个

之前在编写代码过程中一度不理解formItemLayout中labelCol和wrapperCol以及中填写内容都表示什么（主要还是太菜，心疼的抱住拉胯的自己）还在论坛里问了问题，但是没有人回答我（可能是觉得问题太简单了），哭得更大声了一、官网样例在antd官网的Form表单使用的实例中抽一个作为解释案例样式：代码：二、formItemLayout内容解释1、解释准备阶段示例中是将栅格和Form表单合起来使用的，因为栅格是支...

最近忙的飞起，好久没写文章了，偷得浮生半小时闲，写个最近发现的有趣的antd属性吧官方文档对mode属性的描述有趣的是mode中的tags选项如果将mode设置为tags的话，输入的内容会变成下拉框中的一个标签如下图：输入内容（原本下拉框中是没有这个选项的，输入后选择就自动添加到下拉框中）选择，在下拉框中就能出现这个选项了而且输入用逗号分隔的内容也是自动变成下拉框中的标签还蛮有趣的，个人猜测是通过识别逗号进行分割再将其变成标签...

问题描述：最近在学着使用antd的表单组件，刚开始写就给我报错，疯了报出以下错误：报的错就尼玛离谱，在网上搜了，说是antd的版本不对，让换3.X的版本然后就换呗，到antd官网看了下有什么3.X的版本，安装好之后，又报错了错误信息如下：这个时候我才意识到原来是我函数给拼错了为什么一开始不报这个错？VS也顺利通过编译，明明使用了函数还没有定义不知道为什么就给编译通过了，平时有一点点无关痛痒的错误就报得和天塌下来一样。真真是迷惑行为问题解决：1、看...

写代码的时候使用antd的组件，觉得还是比较方便的（虽然antd密闭性也太好了）之前也出现过，因为下载antd出现的问题，使用npm的源国内无法使用。可以使用淘宝的镜像源，要是还不行就用手机的热点下载可是这次出现antd样式不生效的问题，我就装antd了好几遍，npm、cnpm、yarn都试了还是不行于是在网上找，但是其中的解决方法好像都没有对症下药，然后我有去官网看了下引入方法有以下表述：我的代码是在scr下的其他文件夹中写的，并且js文件没有创建对应css文件，应该不需要引.

有时下拉列表太长，找起来也不方便（悄悄嘀咕：就十个出头的选项有什么看不过来的，动动小指头下滑找一下不行吗）看了官方文档，有如下属性叙述：将两个属性配合使用<Select ... showSearch="true" optionFilterProp="children"> <Select.Option value="1-1" key="1-1">111</Select.Option> <Select.Option

问题描述： 想要对List组件的分页进行居中展示，但是查看了官方文档发现pagination没对于位置的设置只有三种可以选择，一度不知道该如何让分页居中显示问题解决： 换了一种思路，不再使用List自带的pagination属性，而是使用其Pagination组件进行分页展示 但是坑爹的是，官方文档里Pagination连position属性都没有进行描述。（十分惊喜，呵呵） 最后，我给其设置了style，进行了手动居中&...

问题描述： 因为有些页面中的查询选择框太多了，所以要求在这些页面上添加重置按钮 选择框使用的是antd的Select组件，antd的组件好用是好用，但是密闭性太强了，想要根据需求自定义就会变得很困难 其中Select组件中占用了value这个属性，将其定义为：指定当前选中的条目 这就带来一个问题，原本初始时我设置了placeholder，给出提示信息，结果现在直接就显示下拉框中的第一条信息。 我准备使用点击Button...

写了个List，就报错，眼睛都快看瞎了，找了好久好久才找到错误以下为报错信息：找了半天，最后黑盒测试，List的语句挨个找，最后定位到了dataSource={this.state.list}renderItem={item => (<List.item>{item}</List.item>)}后来发现List.Item的item没有大写，快哭了，终于找到了如果要是报出这种错，就去找下有没有export，类、函数什么的有没有定义，最重要的就.

在使用VScode的时候发现你不去引用，只要在render里面写出来组件，它会自动帮你去import可是在antd的List上翻车了犯懒直接让VScode补全去了，结果没注意补全的是什么，列表样式死活出不来，和教程上写的一模一样，就是不行想了一下觉得应该是List的问题，又对照了一遍，最后才发现VScode的引入方法和官网上不一样，改过来以后就好了VSccode自动补全的是以下代码：正确引入：import { List } from 'antd';...