Ant Design UI组件之Select踩坑

1

Ant Design UI组件之Select踩坑


前言

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

遇到的问题

  1. 在初始化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。在了解到问题的根源后,修改相应代码。

3.10.9

2.13.11

...
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>
  1. Antd select如何设置能够实现输入筛选

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

    英文官方文档

    中文官方文档

总结

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

你可能感兴趣的

载入中...