React + Antd如何同时获取Select的label和v

首先来讲一下项目需求，在编辑时是一个Select下拉选择框，保存的时候需要给后端同时传递选中数据的label和value，为什么要同时传递label和value呢， value的作用是在编辑的时候回显到Select下拉框中，而label是在详情页面中直接显示的。首先我们清楚使用Form的表单收集到的只是Select的value，如果将每个Select下拉框中写onChange的化是可以拿到label的，但是我们不可能每个Select上面都去写onChange事件，接下来先讲思路

1. 项目使用React hooks + Antd + ts构建

2. 将Select封装到组件中

3. 在Select的onChange中监听

干货

1. 引入我们ts需要用到的类型

import type { FormInstance } from 'antd/lib/form'
import { setFormValue } from '@/utils/from'
import type { NamePath } from 'antd/es/form/interface'

2. 在select的onChange中监听select改变

封装方法

import { setValue, getNamePath } from 'rc-field-form/lib/utils/valueUtil.js'
import { NamePath } from 'antd/es/form/interface'
import { FormInstance } from 'antd/lib/form'
export const setFormValue = (form: FormInstance | undefined, paramName: NamePath, value: any) => {
  const oldFormValues = form?.getFieldsValue(true)
  const formValues = setValue(oldFormValues, getNamePath(paramName), value)
  form?.setFieldsValue(formValues)
}

使用方法

form： 表单实例
paramNamePrefix： 比如要设置的是一个动态表单 可以进行表单add和del的 也就是Antd里面的Form.List 例如Form.List的name是contacts 那么就需要设置paramNamePrefix为contacts  contacts最终的数据结构就是[{}, {}, {},...]这种还需要结合paramName使用，paramNamePrefix 只是一个集合的key，还要具体到是这个集合里面的第几个元素中的哪一个key，paramName的结构是一个数组例如[1, 'name']整体意思就是我要设置contacts这个集合中第一个元素的name属性
paramName：如果没有用到paramNamePrefix只用到了paramName适用的场景是要设置的label和value是同一个级别而且只有一级
setFormValue： 接收三个参数 第一个是当前操作表单的form的实例 第二个是要设置的表单的key 第三个是要设置的key的value
setFormValue(
    form,
    paramNamePrefix ? [].concat(paramNamePrefix).concat(paramName) : paramName,
    value,
 )