Antd组件使用问题、原因分析及解决办法汇总(一)

目录

1、Select选择器的placeholder属性无效

2、TextArea组件在设置defaultValue属性后在渲染时出现旧数据的问题


antd是蚂蚁金服出的一套前端组件,风格偏简约,视觉效果还不错。本文简要总结了我在近期使用过程中遇到的比较棘手的问题,对其进行了相应的原因分析并给出了亲测有效的解决办法(本文使用的前端框架是dva)。

1、Select选择器的placeholder属性无效

【现象描述】代码里明明已经添加了placeholder属性值,但总是无效的,即渲染出来并没有显示设定值,如下图。

【原因分析】仔细查看选择器,当鼠标悬浮到选择器上时,发现是可以清除的(如下图);这说明选择器默认是有值的。

【解决办法】从原因出发就比较容易了,将选择器的值清除后预先设定的placeholder属性便显示出来了。经过测试,选择器的值为null或空字符串时(主要是这两种情况不易被发现)是无法展示placeholder属性的;不过undefined并不会产生异常影响。

2、TextArea组件在设置defaultValue属性后在渲染时出现旧数据的问题

【现象描述】我的分页数据列表中,每一行加了悬浮框,悬浮框主要是由TextArea构成的。在对列表数据进行分页的时候,惊奇的发现后一页渲染出来的内容是前一页的数据;下图中上面是第1页的悬浮窗,下面是第2页的悬浮框;第2页的悬浮框渲染出来的居然是第1页的内容,而且,在第1页中渲染过哪些悬浮框,第2页相应行的悬浮框就会出现旧数据(当然,并不严格区分页数大小,哪页先渲染)。

PS:直接将数据放在起止标签中间的文本内容上也存在这个问题

(首次渲染的悬浮框)

(下一页同样位置的悬浮框内容)

【原因分析】暂时不详。个人推测:从代码上及跟踪调试过程可以确定本例中的悬浮框在每个新页中都是重新渲染出来的,再加上按照传统的将数据内容写在TextArea的起止标签中间也存在这个问题,因此antd或dva在渲染元素时可能写有缓存,且defaultValue属性无法清除该缓存

【解决办法】使用value属性即可

【待续...】

 

 

 

 

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值