ant中select回显value问题

问题描述

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定制回填内容