国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Ant Design UI組件之Select踩坑

NotFound / 1571人閱讀

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

前言

1. 在使用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", {
        })(            
           
        )}
    

現在版本也是能支持 string | number

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

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

3. Select 中 onChange && onSearch的區別

? 觸發onChange方法是在 option 中你選中其中一個才會觸發, 而onSearch 是在 文本框值變化時才觸發的。

如圖:

1558526278564

所以當我們需要模糊查詢的時候需要在onSearch 時請求接口獲取數據該方法需要節流

總結

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

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

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

【完】

作者簡介:鄭佳歡,蘆葦科技web前端實習生,公司作品:口紅挑戰網紅小游戲、服務端渲染官網。擅長網站建設、公眾號開發、微信小程序開發、小游戲、公眾號開發,專注于前端領域框架、交互設計、圖像繪制、數據分析等研究。 一起并肩作戰: zhengjiahuan@talkmoney.cn 訪問 www.talkmoney.cn 了解更多

作者:廣州蘆葦科技web前端

鏈接:juejin.im/post/5ce352…

來源:掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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

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

相關文章

  • Ant Design UI組件Select踩坑

    摘要:了解到項目使用版本是版本的,懷疑是版本問題。在了解到問題的根源后,修改相應代碼。再去查看相應官方文檔由于英文不好,沒有理解到官方文檔的意思。還是需要加強對英文官方文檔的理解。 Ant Design UI組件之Select踩坑 前言 在使用Ant design UI組件時總會遇到一些奇奇怪怪的問題,在本篇中將總結中在使用Select中幾種容易常見的問題,持續更新 遇到的問題 在初始化...

    mikasa 評論0 收藏0
  • Dva + Ant Design 前后端分離 React 應用實踐

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

    tainzhi 評論0 收藏0
  • React的移動端和PC端生態圈的使用匯總

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

    kun_jian 評論0 收藏0
  • React的移動端和PC端生態圈的使用匯總

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

    J4ck_Chan 評論0 收藏0
  • React的移動端和PC端生態圈的使用匯總

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

    Travis 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<