Ant Design UI組件之Select踩坑

mikasa 發布于2019-08-23 15:31 / 2326人閱讀

摘要：了解到項目使用版本是版本的，懷疑是版本問題。在了解到問題的根源后，修改相應代碼。再去查看相應官方文檔由于英文不好，沒有理解到官方文檔的意思。還是需要加強對英文官方文檔的理解。

前言

在使用Ant design UI組件時總會遇到一些奇奇怪怪的問題，在本篇中將總結中在使用Select中幾種容易常見的問題，持續更新

遇到的問題

在初始化Select值,如何根據value顯示對應文本

實現代碼如下

...
this.props.form.setFieldsValue({
    latticeId,
    latticeNo,
    goodsId,
    remaining
});
...

    {getFieldDecorator("goodsId", {
                                
    })(            
    
    )}

此時，代碼實現的效果并不如預期效果，顯示出了商品的id

在嘗試加上value屬性的時候出現了一個問題

查閱相關文檔是支持number的，百思不得其解。了解到項目使用版本是2.13.10版本的，懷疑是版本問題。查閱對應版本的文檔，問題就出現在這里，在2.13.11版本中value是還不支持number類型的，只支持string。在了解到問題的根源后，修改相應代碼。

...
this.props.form.setFieldsValue({
    goodsId: goodsId && goodsId.toString(),
});
...

    {getFieldDecorator("goodsId", {
        
    })(            
       
    )}

Antd select如何設置能夠實現輸入篩選

在使用select實現輸入篩選時只需要在Select中加上showSearch即可，不過需要注意的是默認是根據value值篩選，需要使用內容實現輸入篩選的話可以使用設置optionFilterProp屬性為"children"。

總結

在使用Ant Design UI組件時遇到一些不符合預期的錯誤時，可以查看是否是因版本問題導致的，才能對癥下藥

第二個問題出現是因為一開始有人告知篩選屬性只能根據value去篩選而忽略了去查看官方文檔，而采用蹩腳的方式去實現，花費了較長時間。再去查看相應官方文檔由于英文不好，沒有理解到官方文檔的意思。還是需要加強對英文官方文檔的理解。

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

云服務器 GPU云服務器 Ant Design ant-design ui組件 element-ui dialog組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102176.html

Ant Design UI組件之Select踩坑

摘要：了解到項目使用版本是版本的，懷疑是版本問題。在了解到問題的根源后，修改相應代碼。再去查看相應官方文檔由于英文不好，沒有理解到官方文檔的意思。還是需要加強對英文官方文檔的理解。前言 1. 在使用Ant design UI組件時總會遇到一些奇奇怪怪的問題，在本篇中將總結在使用Select時幾種常見的問題遇到的問題在初始化Select值,如何根據value顯示對應文本 showImg(http...

NotFound 2019-05-23 14:34 評論0 收藏0
Dva + Ant Design 前后端分離之 React 應用實踐

摘要：數據緩存對于一個應用來說，緩存是很重要的一步。所以，比較常見的方法就是將數據緩存在中。什么時候做數據緩存例用戶信息緩存參見在中配置了檢測中的是否存在。源站鏈接 https://tkvern.com 繼 Rails 從入門到完全放棄擁抱 Elixir + Phoenix + React + Redux 這篇文章被噴之后，筆者很長一段時候沒有上社區逛了。現在 tkvern 又回歸了，給...

tainzhi 2019-08-20 14:03 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

kun_jian 2019-08-02 15:28 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

J4ck_Chan 2019-08-23 18:32 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

Travis 2019-08-30 11:19 評論0 收藏0