Ant Design UI組件之Select踩坑

---

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. 在使用組件時最好能幫該組件的屬性都熟悉理解一遍，不要偷懶只聽從他人的，很多問題的出現都可以從官方文檔中找到想要的答案。