ant中select回显value问题及解决
更新时间：2026年03月17日 09:59:03 作者：lyce_liu
在React项目中使用Ant Design的Select组件时,如果设置了自定义的`fieldNames`属性,选中项的label会显示,但回填到选择框时显示的是value值,解决方法是使用`optionLabelProp`属性指定回填到选择框的Option属性为自定义的label字段
问题描述
react项目中使用ant的select选择器遇到的问题，选中某一项后，想要的效果是显示选中项的label，但回填到选择框却为为value值。
原因分析
因为使用了fieldNames属性自定义节点 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="暂无数据"
/>`
解决方案
使用 optionLabelProp 属性指定回填到选择框的 Option 属性，默认是children，
需要optionLabelProp 设置为自定义的label字段即可，即在select中添加属性optionLabelProp ="dictLabel"
fieldNames={{ label: "dictLabel", value: "dictValue" }}
optionLabelProp="dictLabel" //optionLabelProp等于自定义label
官方文档：4x.ant.design定制回填内容
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于React组件中对子组件children进行加强的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要为大家介绍了react Suspense工作原理解析以及基本应用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React冒泡和阻止冒泡的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了React如何通过ref获取子组件的数据和方法,文中有详细的总结内容和代码示例,具有一定的参考价值,需要的朋友可以参考下2023-10-10
在React的生命周期钩子和合成事件中，多次执行setState，会被调用几次，本文就详细的介绍一下，感兴趣的可以了解一下2021-11-11
这篇文章主要介绍了React类组件的更新过程,包括组件初始化、更新和卸载的生命周期方法,以及如何使用setState和forceUpdate来控制视图的更新,感兴趣的朋友一起看看吧2025-01-01
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧2021-06-06
这篇文章主要给大家介绍了关于使用React+ts实现无缝滚动的走马灯详细过程,文中给出了详细的代码示例以及图文教程,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了一文详解React Redux使用方法，文章围绕主题展开详细的内容戒杀，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
React二维数组声明需注意结构与值的可变性,正确方法包括直接赋值或动态初始化,避免使用const map=[[]]导致长度固定,动态扩展时应先定义一维数组再添加元素,确保数组大小可变2025-07-07
最新评论