Ant Design UI元件之Select踩坑

weixin_34396103發表於2019-02-27
UI元件

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

相關文章