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。在相识到题目的泉源后，修正响应代码。

...
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. 在运用组件时最好能帮该组件的属性都熟习明白一遍，不要偷懒只遵从别人的，许多题目的涌现都能够从官方文档中找到想要的答案。