Ant Design UI組件之Select踩坑

mikasa 發(fā)布于2019-08-23 15:31 / 2313人閱讀

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

Ant Design UI組件之Select踩坑

前言

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

遇到的問題

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

實現(xiàn)代碼如下

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

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

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

在嘗試加上value屬性的時候出現(xiàn)了一個問題

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

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

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

Antd select如何設置能夠實現(xiàn)輸入篩選

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

總結

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

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

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

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

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

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

Ant Design UI組件之Select踩坑

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

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

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

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

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

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

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

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

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

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