摘要：了解到项目使用版本是版本的，怀疑是版本问题。在了解到问题的根源后，修改相应代码。再去查看相应官方文档由于英文不好，没有理解到官方文档的意思。还是需要加强对英文官方文档的理解。
1. 在使用Ant design UI组件时总会遇到一些奇奇怪怪的问题，在本篇中将总结在使用Select时几种常见的问题
实现代码如下
...
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", {
})(
)}
现在版本也是能支持 string | number
2. Antd select如何设置能够实现输入筛选
在使用select实现输入筛选时只需要在Select中加上showSearch即可，不过需要注意的是默认是根据 Option中value值筛选，需要使用内容实现输入筛选的话可以使用设置optionFilterProp属性为"children"。
3. Select 中 onChange && onSearch的区别
触发onChange方法是在 option 中你选中其中一个才会触发， 而onSearch 是在 文本框值变化时才触发的。
如图：
所以当我们需要模糊查询的时候需要在onSearch 时请求接口获取数据该方法需要节流
总结在使用Ant Design UI组件时遇到一些不符合预期的错误时，可以查看是否是因版本问题导致的，才能对症下药
第二个问题出现是因为一开始有人告知筛选属性只能根据value去筛选而忽略了去查看官方文档，而采用蹩脚的方式去实现，花费了较长时间。再去查看相应官方文档由于英文不好，没有理解到官方文档的意思。还是需要加强对英文官方文档的理解。
在使用组件时最好能帮该组件的属性都熟悉理解一遍，不要偷懒只听从他人的，很多问题的出现都可以从官方文档中找到想要的答案。
【完】
作者简介：郑佳欢，芦苇科技web前端实习生，公司作品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 一起并肩作战： zhengjiahuan@talkmoney.cn 访问 www.talkmoney.cn 了解更多
作者：广州芦苇科技web前端
链接：juejin.im/post/5ce352…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/7027.html
摘要：了解到项目使用版本是版本的，怀疑是版本问题。在了解到问题的根源后，修改相应代码。再去查看相应官方文档由于英文不好，没有理解到官方文档的意思。还是需要加强对英文官方文档的理解。 Ant Design UI组件之Select踩坑 前言 在使用Ant design UI组件时总会遇到一些奇奇怪怪的问题，在本篇中将总结中在使用Select中几种容易常见的问题，持续更新 遇到的问题 在初始化...
摘要：数据缓存对于一个应用来说，缓存是很重要的一步。所以，比较常见的方法就是将数据缓存在中。什么时候做数据缓存例用户信息缓存参见在中配置了检测中的是否存在。 源站链接 https://tkvern.com 继 Rails 从入门到完全放弃 拥抱 Elixir + Phoenix + React + Redux 这篇文章被喷之后，笔者很长一段时候没有上社区逛了。现在 tkvern 又回归了，给...
摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...
摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...
摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...
阅读 3486·2021-11-18 10:07
阅读 1585·2021-11-04 16:08
阅读 1502·2021-11-02 14:43
阅读 1082·2021-10-09 09:59
阅读 836·2021-09-08 10:43
阅读 1072·2021-09-07 09:59
阅读 954·2019-12-27 11:56
阅读 991·2019-08-30 15:56
