Ant Design UI组件之Select踩坑

mikasa 发布于2019-08-23 15:31 / 2161人阅读

摘要：了解到项目使用版本是版本的，怀疑是版本问题。在了解到问题的根源后，修改相应代码。再去查看相应官方文档由于英文不好，没有理解到官方文档的意思。还是需要加强对英文官方文档的理解。

前言

在使用Ant design UI组件时总会遇到一些奇奇怪怪的问题，在本篇中将总结中在使用Select中几种容易常见的问题，持续更新

遇到的问题

在初始化Select值,如何根据value显示对应文本

实现代码如下

...
this.props.form.setFieldsValue({
    latticeId,
    latticeNo,
    goodsId,
    remaining
});
...

    {getFieldDecorator("goodsId", {
                                
    })(            
    
    )}

此时，代码实现的效果并不如预期效果，显示出了商品的id

在尝试加上value属性的时候出现了一个问题

查阅相关文档是支持number的，百思不得其解。了解到项目使用版本是2.13.10版本的，怀疑是版本问题。查阅对应版本的文档，问题就出现在这里，在2.13.11版本中value是还不支持number类型的，只支持string。在了解到问题的根源后，修改相应代码。

...
this.props.form.setFieldsValue({
    goodsId: goodsId && goodsId.toString(),
});
...

    {getFieldDecorator("goodsId", {
        
    })(            
       
    )}

Antd select如何设置能够实现输入筛选

在使用select实现输入筛选时只需要在Select中加上showSearch即可，不过需要注意的是默认是根据value值筛选，需要使用内容实现输入筛选的话可以使用设置optionFilterProp属性为"children"。

总结

在使用Ant Design UI组件时遇到一些不符合预期的错误时，可以查看是否是因版本问题导致的，才能对症下药

第二个问题出现是因为一开始有人告知筛选属性只能根据value去筛选而忽略了去查看官方文档，而采用蹩脚的方式去实现，花费了较长时间。再去查看相应官方文档由于英文不好，没有理解到官方文档的意思。还是需要加强对英文官方文档的理解。

在使用组件时最好能帮该组件的属性都熟悉理解一遍，不要偷懒只听从他人的，很多问题的出现都可以从官方文档中找到想要的答案。

私有云服务器托管 Ant Design ant-design ui组件 element-ui dialog组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102176.html

Ant Design UI组件之Select踩坑

摘要：了解到项目使用版本是版本的，怀疑是版本问题。在了解到问题的根源后，修改相应代码。再去查看相应官方文档由于英文不好，没有理解到官方文档的意思。还是需要加强对英文官方文档的理解。前言 1. 在使用Ant design UI组件时总会遇到一些奇奇怪怪的问题，在本篇中将总结在使用Select时几种常见的问题遇到的问题在初始化Select值,如何根据value显示对应文本 showImg(http...

NotFound 2019-05-23 14:34 评论0 收藏0
Dva + Ant Design 前后端分离之 React 应用实践

摘要：数据缓存对于一个应用来说，缓存是很重要的一步。所以，比较常见的方法就是将数据缓存在中。什么时候做数据缓存例用户信息缓存参见在中配置了检测中的是否存在。源站链接 https://tkvern.com 继 Rails 从入门到完全放弃拥抱 Elixir + Phoenix + React + Redux 这篇文章被喷之后，笔者很长一段时候没有上社区逛了。现在 tkvern 又回归了，给...

tainzhi 2019-08-20 14:03 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

kun_jian 2019-08-02 15:28 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

J4ck_Chan 2019-08-23 18:32 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

Travis 2019-08-30 11:19 评论0 收藏0