React-Final-Form集成React-Select时如何仅提交选中项的value值

问题根源是现有适配器直接透传React-Final-Form的input prop给React-Select，没有做双向值格式转换：

1. 正向（表单状态→组件渲染）：表单最终要存纯数字格式的业务值，但React-Select需要匹配options结构的完整option对象才能正常回显
2. 反向（组件交互→表单状态）：React-Select选中后会抛出完整的option对象，但我们只需要提取对象内的value字段存入表单状态
   之前尝试自定义onChange导致回显失败，是因为只做了反向的值转换，没有处理正向的回显值适配，导致Select收到纯数字值无法匹配对应选项，无法正常回显；更不建议通过组件本地状态存储选中值，这种方式会破坏表单的单一状态源，必然导致状态不同步问题。

改造后的适配器实现 #

直接替换原来的透传写法即可：

ReactSelectAdapter = ({ input, options, ...rest }) => {
  // 正向转换：把表单存储的纯value值，匹配成React-Select可识别的完整option对象
  const matchedSelectedOption = options.find(opt => opt.value === input.value) ?? null;

  return (
    <Select
      {...rest}
      options={options}
      // 反向转换：Select触发选中时，只提取option的value字段传给表单，不存储完整对象
      onChange={(selectedOption) => input.onChange(selectedOption?.value ?? '')}
      // 覆盖默认透传的value，传转换后的匹配对象给Select，保证回显正常
      value={matchedSelectedOption}
      searchable
    />
  );
};

改造完成后，表单状态里的systemId字段就只会存储纯数字的value值，提交时的数据结构会直接匹配后端要求的格式，不需要在提交前额外做值的过滤转换。

• 编辑场景初始值适配：如果编辑时从接口拿到的初始值是纯数字格式的systemId，不需要做额外转换，适配器会自动匹配对应options完成回显
• 多选场景适配：如果需要支持多选，只要调整转换逻辑为数组匹配即可：

  // 多选场景下的value转换
  const matchedSelectedOptions = options.filter(opt => input.value?.includes(opt.value)) ?? [];
  // 多选场景下的onChange转换
  onChange={(selectedList) => input.onChange(selectedList?.map(item => item.value) ?? [])}
  

React-Final-Form和Redux-Form的表单值修改能力完全对等，在Form组件的render回调里可以直接拿到form实例，调用form.change(字段名, 目标值)即可手动修改对应字段的表单值，本场景下不需要用到这个方法，因为适配器层的双向转换已经覆盖了值流转的全流程。

内容的提问来源于stack exchange，提问作者reactFullStackDeveloper