亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Ant Design UI組件之Select踩坑

NotFound / 1632人閱讀

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

前言

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

遇到的問(wèn)題

在初始化Select值,如何根據(jù)value顯示對(duì)應(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è)問(wèn)題

查閱相關(guān)文檔是支持number的，百思不得其解。 了解到項(xiàng)目使用版本是2.13.10版本的，懷疑是版本問(wèn)題。查閱對(duì)應(yīng)版本的文檔，問(wèn)題就出現(xiàn)在這里，在2.13.11版本中value是不支持number類型的，只支持string。 在了解到問(wèn)題的根源后，修改相應(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即可，不過(guò)需要注意的是默認(rèn)是根據(jù) Option中value值篩選，需要使用內(nèi)容實(shí)現(xiàn)輸入篩選的話可以使用設(shè)置optionFilterProp屬性為"children"。

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

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

如圖：

1558526278564

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

總結(jié)

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

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

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

【完】

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

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

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

來(lái)源：掘金

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/7027.html

相關(guān)文章

  • Ant Design UI組件之Select踩坑

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

    mikasa 評(píng)論0 收藏0

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

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

    tainzhi 評(píng)論0 收藏0

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

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

    kun_jian 評(píng)論0 收藏0

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

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

    J4ck_Chan 評(píng)論0 收藏0

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

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

    Travis 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<