資訊專欄INFORMATION COLUMN
摘要：了解到項(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中幾種容易常見的問(wèn)題，持續(xù)更新
遇到的問(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", {
})(
)}
Antd select如何設(shè)置能夠?qū)崿F(xiàn)輸入篩選
在使用select實(shí)現(xiàn)輸入篩選時(shí)只需要在Select中加上showSearch即可，不過(guò)需要注意的是默認(rèn)是根據(jù)value值篩選，需要使用內(nèi)容實(shí)現(xiàn)輸入篩選的話可以使用設(shè)置optionFilterProp屬性為"children"。
總結(jié)在使用Ant Design UI組件時(shí)遇到一些不符合預(yù)期的錯(cuò)誤時(shí)，可以查看是否是因版本問(wèn)題導(dǎo)致的，才能對(duì)癥下藥
第二個(gè)問(wèn)題出現(xiàn)是因?yàn)橐婚_始有人告知篩選屬性只能根據(jù)value去篩選而忽略了去查看官方文檔，而采用蹩腳的方式去實(shí)現(xiàn)，花費(fèi)了較長(zhǎng)時(shí)間。再去查看相應(yīng)官方文檔由于英文不好，沒(méi)有理解到官方文檔的意思。還是需要加強(qiáng)對(duì)英文官方文檔的理解。
在使用組件時(shí)最好能幫該組件的屬性都熟悉理解一遍，不要偷懶只聽從他人的，很多問(wèn)題的出現(xiàn)都可以從官方文檔中找到想要的答案。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/102176.html
摘要：了解到項(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í)幾種常見的問(wèn)題 遇到的問(wèn)題 在初始化Select值,如何根據(jù)value顯示對(duì)應(yīng)文本 showImg(http...
摘要：數(shù)據(jù)緩存對(duì)于一個(gè)應(yīng)用來(lái)說(shuō)，緩存是很重要的一步。所以，比較常見的方法就是將數(shù)據(jù)緩存在中。什么時(shí)候做數(shù)據(jù)緩存例用戶信息緩存參見在中配置了檢測(cè)中的是否存在。 源站鏈接 https://tkvern.com 繼 Rails 從入門到完全放棄 擁抱 Elixir + Phoenix + React + Redux 這篇文章被噴之后，筆者很長(zhǎng)一段時(shí)候沒(méi)有上社區(qū)逛了?，F(xiàn)在 tkvern 又回歸了，給...
摘要：調(diào)用通過(guò)注冊(cè)表調(diào)用到實(shí)例，透過(guò)的，調(diào)用到中的，最后通過(guò)，調(diào)用，根據(jù)參數(shù)相應(yīng)模塊執(zhí)行。京東的，多端解決方案是一套遵循語(yǔ)法規(guī)范的多端開發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對(duì)于一項(xiàng)技術(shù)，我們不能停留在五分鐘狀態(tài)，特別喜歡一句話，用什么方式繪制UI界面一點(diǎn)不重要，重要的是底層的思維，解決問(wèn)題和優(yōu)化...
摘要：調(diào)用通過(guò)注冊(cè)表調(diào)用到實(shí)例，透過(guò)的，調(diào)用到中的，最后通過(guò)，調(diào)用，根據(jù)參數(shù)相應(yīng)模塊執(zhí)行。京東的，多端解決方案是一套遵循語(yǔ)法規(guī)范的多端開發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對(duì)于一項(xiàng)技術(shù)，我們不能停留在五分鐘狀態(tài)，特別喜歡一句話，用什么方式繪制UI界面一點(diǎn)不重要，重要的是底層的思維，解決問(wèn)題和優(yōu)化...
摘要：調(diào)用通過(guò)注冊(cè)表調(diào)用到實(shí)例，透過(guò)的，調(diào)用到中的，最后通過(guò)，調(diào)用，根據(jù)參數(shù)相應(yīng)模塊執(zhí)行。京東的，多端解決方案是一套遵循語(yǔ)法規(guī)范的多端開發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對(duì)于一項(xiàng)技術(shù)，我們不能停留在五分鐘狀態(tài)，特別喜歡一句話，用什么方式繪制UI界面一點(diǎn)不重要，重要的是底層的思維，解決問(wèn)題和優(yōu)化...
閱讀 2632·2019-08-30 10:53
閱讀 3232·2019-08-29 16:20
閱讀 2991·2019-08-29 15:35
閱讀 1816·2019-08-29 12:24
閱讀 2908·2019-08-28 18:19
閱讀 1896·2019-08-23 18:07
閱讀 2387·2019-08-23 15:31
閱讀 1229·2019-08-23 14:05
