成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Ant Design UI組件之Select踩坑

NotFound / 1576人閱讀

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

前言

1. 在使用Ant design UI組件時(shí)總會遇到一些奇奇怪怪的問題，在本篇中將總結(jié)在使用Select時(shí)幾種常見的問題

遇到的問題

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

實(shí)現(xiàn)代碼如下

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

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

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

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

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

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

現(xiàn)在版本也是能支持 string | number

2. Antd select如何設(shè)置能夠?qū)崿F(xiàn)輸入篩選

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

3. Select 中 onChange && onSearch的區(qū)別

? 觸發(fā)onChange方法是在 option 中你選中其中一個(gè)才會觸發(fā)， 而onSearch 是在 文本框值變化時(shí)才觸發(fā)的。

如圖：

1558526278564

所以當(dāng)我們需要模糊查詢的時(shí)候需要在onSearch 時(shí)請求接口獲取數(shù)據(jù)該方法需要節(jié)流

總結(jié)

    在使用Ant Design UI組件時(shí)遇到一些不符合預(yù)期的錯(cuò)誤時(shí)，可以查看是否是因版本問題導(dǎo)致的，才能對癥下藥

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

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

【完】

作者簡介：鄭佳歡，蘆葦科技web前端實(shí)習(xí)生，公司作品：口紅挑戰(zhàn)網(wǎng)紅小游戲、服務(wù)端渲染官網(wǎng)。擅長網(wǎng)站建設(shè)、公眾號開發(fā)、微信小程序開發(fā)、小游戲、公眾號開發(fā)，專注于前端領(lǐng)域框架、交互設(shè)計(jì)、圖像繪制、數(shù)據(jù)分析等研究。 一起并肩作戰(zhàn)： [email protected] 訪問 www.talkmoney.cn 了解更多

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

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

來源：掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/7027.html

相關(guān)文章

  • Ant Design UI組件之Select踩坑

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

    mikasa 評論0 收藏0

  • Dva + Ant Design 前后端分離之 React 應(yīng)用實(shí)踐

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

    tainzhi 評論0 收藏0

  • React的移動端和PC端生態(tài)圈的使用匯總

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

    kun_jian 評論0 收藏0

  • React的移動端和PC端生態(tài)圈的使用匯總

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

    J4ck_Chan 評論0 收藏0

  • React的移動端和PC端生態(tài)圈的使用匯總

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

    Travis 評論0 收藏0

發(fā)表評論

0條評論

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