共计 1706 个字符,预计需要花费 5 分钟才能阅读完成。
前言
1. 在使用 Ant design UI 组件时总会遇到一些奇奇怪怪的问题,在本篇中将总结在使用 Select 时几种常见的问题
遇到的问题
在初始化 Select 值, 如何根据 value 显示对应文本
实现代码如下
...
this.props.form.setFieldsValue({
latticeId,
latticeNo,
goodsId,
remaining
});
...
<FormItem {...formItemLayout} label="商品">
{getFieldDecorator('goodsId', {})(<Select style={{ width: '150px'}}>
{this.state.goodsData.map((item,index) => <Option key={item.goodsId} >{item.goodsId +'-' + item.goodsName}</Option>)}
</Select>
)}
</FormItem>
此时,代码实现的效果并不如预期效果,显示出了商品的 id
在尝试加上 value 属性的时候出现了一个问题
查阅相关文档是支持 number 的,百思不得其解。
了解到项目使用版本是 2.13.10 版本的,怀疑是版本问题。查阅对应版本的文档,问题就出现在这里,在 2.13.11 版本中 value 是不支持 number 类型的,只支持 string。
在了解到问题的根源后,修改相应代码。
...
this.props.form.setFieldsValue({goodsId: goodsId && goodsId.toString(),
});
...
<FormItem {...formItemLayout} label="商品">
{getFieldDecorator('goodsId', {})(<Select style={{ width: '150px'}}>
{this.state.goodsData.map((item,index) => <Option key={item.goodsId} value={item.goodsId.toString()}>{item.goodsId +'-' + item.goodsName}</Option>)}
</Select>
)}
</FormItem>
现在版本也是能支持 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 前端
链接:https://juejin.im/post/5ce352…
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。