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 native图片解析流程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
本篇文章主要介绍了react router 4.0以上的路由应用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章主要介绍了ReactJS实现表单的单选多选和反选的示例，非常具有实用价值，需要的朋友可以参考下2017-10-10
本篇文章主要介绍了react中使用swiper的具体方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
React项目中报错:Parsing error: The keyword &a
ESLint 默认使用的是 ES5 语法,如果你想使用 ES6 或者更新的语法,你需要在 ESLint 的配置文件如：.eslintrc.js等中设置 parserOptions,这篇文章主要介绍了React项目中报错:Parsing error: The keyword 'import' is reservedeslint的问题及解决方法,需要的朋友可以参考下2023-12-12
react不同于vue，通过在路由里设置meta元字符实现路由拦截。本文就详细的介绍一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家介绍了React Native项目中启用Hermes引擎实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了react中使用video.js的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
本篇文章主要介绍了使用ES6语法重构React代码详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
使用react-virtualized实现图片动态高度长列表的问题
一般我们在写react项目中,同时渲染很多dom节点,会造成页面卡顿, 空白的情况。为了解决这个问题，今天小编给大家分享一篇教程关于react-virtualized实现图片动态高度长列表的问题，感兴趣的朋友跟随小编一起看看吧2021-05-05
最新评论