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...

來源：掘金

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。