Ant Design UI元件之Select踩坑

前言

1. 在使用ant design ui元件時總會遇到一些奇奇怪怪的問題，在本篇中將總結在使用select時幾種常見的問題

遇到的問題

在初始化select值,如何根據value顯示對應文字

實現**如下

...
this
.props.form.
setfieldsvalue()
;...
"商品"
>)(
}>
>
<
/option>)}
<
/select>)}
<
/formitem>

此時，**實現的效果並不如預期效果，顯示出了商品的id

在嘗試加上value屬性的時候出現了乙個問題

查閱相關文件是支援number的，百思不得其解。

了解到專案使用版本是2.13.10版本的，懷疑是版本問題。查閱對應版本的文件，問題就出現在這裡，在2.13.11版本中value是不支援number型別的，只支援string。

在了解到問題的根源後，修改相應**。

"商品"

>)(

value=

/option>)}

/select>)}

/formitem>

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

2. antd select如何設定能夠實現輸入篩選

在使用select實現輸入篩選時只需要在select中加上showsearch即可，不過需要注意的是預設是根據 option中value值篩選，需要使用內容實現輸入篩選的話可以使用設定optionfilterprop屬性為"children"。

3. select 中 onchange && onsearch的區別

觸發onchange方法是在 option 中你選中其中乙個才會觸發，而onsearch 是在文字框值變化時才觸發的。

如圖：

所以當我們需要模糊查詢的時候需要在onsearch 時請求介面獲取資料該方法需要節流

在使用ant design ui元件時遇到一些不符合預期的錯誤時，可以檢視是否是因版本問題導致的，才能對症下藥

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

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

【完】