Ant Design UI组件之Select踩坑

前言

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 时请求接口获取数据该方法须要节流

总结

1. 在使用Ant Design UI组件时遇到一些不符合预期的错误时，能够查看是不是因版本问题致使的，才能对症下药
2. 第二个问题出现是由于一开始有人告知筛选属性只能根据value去筛选而忽略了去查看官方文档，而采用蹩脚的方式去实现，花费了较长时间。再去查看相应官方文档因为英文很差，没有理解到官方文档的意思。仍是须要增强对英文官方文档的理解。
3. 在使用组件时最好能帮该组件的属性都熟悉理解一遍，不要偷懒只遵从他人的，不少问题的出现均可以从官方文档中找到想要的答案。

【完】

做者简介：郑佳欢，芦苇科技web前端实习生，公司做品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专一于前端领域框架、交互设计、图像绘制、数据分析等研究。 一块儿并肩做战： zhengjiahuan@talkmoney.cn 访问 www.talkmoney.cn 了解更多

做者：广州芦苇科技web前端

连接：https://juejin.im/post/5ce352...

来源：掘金

著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。