ant中select回顯value問題及解決
更新時(shí)間：2026年03月17日 09:59:03 作者：lyce_liu
在React項(xiàng)目中使用Ant?Design的Select組件時(shí),如果設(shè)置了自定義的`fieldNames`屬性,選中項(xiàng)的label會顯示,但回填到選擇框時(shí)顯示的是value值,解決方法是使用`optionLabelProp`屬性指定回填到選擇框的Option屬性為自定義的label字段
問題描述
react項(xiàng)目中使用ant的select選擇器遇到的問題，選中某一項(xiàng)后，想要的效果是顯示選中項(xiàng)的label，但回填到選擇框卻為為value值。
原因分析
因?yàn)槭褂昧?code>fieldNames屬性自定義節(jié)點(diǎn) label、value、options 字段{ label: “dictLabel”, value: “dictValue” }。
<Select
showSearch
allowClear
fieldNames={{ label: "dictLabel", value: "dictValue" }}
options={selectOptions}
filterOption={(input, option) =>
(option?.dictLabel ?? '').toLowerCase().includes(input.toLowerCase())
}
notFoundContent="暫無數(shù)據(jù)"
/>`
解決方案
使用 optionLabelProp 屬性指定回填到選擇框的 Option 屬性，默認(rèn)是children，
需要optionLabelProp 設(shè)置為自定義的label字段即可，即在select中添加屬性optionLabelProp ="dictLabel"
fieldNames={{ label: "dictLabel", value: "dictValue" }}
optionLabelProp="dictLabel" //optionLabelProp等于自定義label
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React組件對子組件children進(jìn)行加強(qiáng)的方法
這篇文章主要給大家介紹了關(guān)于React組件中對子組件children進(jìn)行加強(qiáng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家介紹了react Suspense工作原理解析以及基本應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了React冒泡和阻止冒泡的應(yīng)用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
React通過ref獲取子組件的數(shù)據(jù)和方法
這篇文章主要介紹了React如何通過ref獲取子組件的數(shù)據(jù)和方法,文中有詳細(xì)的總結(jié)內(nèi)容和代碼示例,具有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10
淺談React多個(gè)setState會調(diào)用幾次
在React的生命周期鉤子和合成事件中，多次執(zhí)行setState，會被調(diào)用幾次，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-11-11
這篇文章主要介紹了React類組件的更新過程,包括組件初始化、更新和卸載的生命周期方法,以及如何使用setState和forceUpdate來控制視圖的更新,感興趣的朋友一起看看吧2025-01-01
React引入antd-mobile+postcss搭建移動端
本文給大家分享React引入antd-mobile+postcss搭建移動端的詳細(xì)流程，文末給大家分享我的一些經(jīng)驗(yàn)記錄使用antd-mobile時(shí)發(fā)現(xiàn)我之前配置的postcss失效了，防止大家踩坑，特此把解決方案分享到腳本之家平臺，需要的朋友參考下吧2021-06-06
使用React+ts實(shí)現(xiàn)無縫滾動的走馬燈詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于使用React+ts實(shí)現(xiàn)無縫滾動的走馬燈詳細(xì)過程,文中給出了詳細(xì)的代碼示例以及圖文教程,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了一文詳解React?Redux使用方法，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
React二維數(shù)組聲明需注意結(jié)構(gòu)與值的可變性,正確方法包括直接賦值或動態(tài)初始化,避免使用const map=[[]]導(dǎo)致長度固定,動態(tài)擴(kuò)展時(shí)應(yīng)先定義一維數(shù)組再添加元素,確保數(shù)組大小可變2025-07-07