Redux Form同表单实现新增编辑提交时新增回调不触发问题咨询

问题原因分析 #

新增场景回调未触发的核心原因： #

• handleSubmit 是Formik/React Hook Form等表单库提供的高阶函数，其返回的执行函数必须接收表单提交的event对象作为入参才能正常触发校验、执行后续回调。你在handleEdit中调用editCallBack()时没有传入事件对象，导致handleSubmit逻辑中断，不会执行createOrUpdateService。
  编辑场景能正常执行是因为点击「Edit Service」按钮时表单已经有合法的历史数据，部分表单库会缓存已通过的校验结果，无event参数时也会兼容执行；而新增场景表单为初始空状态，无缓存校验结果，直接中断执行。
• 你为Save按钮设置了type="submit"属性，若表单未绑定顶层onSubmit处理函数，默认的表单提交行为会触发页面刷新，也会导致自定义回调逻辑被中断。
• 新增场景下点击「New Service」后如果没有清空表单原有id字段、或者表单未通过校验，也会出现回调未执行的情况。

修复方案 #

1. 调整handleEdit方法，传递事件参数 #

const handleEdit = (editCallBack, event) => {
    if (editable) {
      // 将触发事件传递给handleSubmit回调
      editCallBack(event)
    }
    toggleEditable();
}

2. 修改Save按钮配置，避免默认提交 #

<button 
  className='btn btn-form my-button--orange' 
  type="button" // 将submit改为button，禁用默认表单提交行为
  style={{margin: "5px"}}
  disabled={!editable} 
  onClick={(e) => handleEdit(handleSubmit(createOrUpdateService), e) } 
>
  Save
</button>

3. 补充新增场景的表单初始化逻辑 #

点击「New Service」时手动清空表单数据，确保id为undefined，同时触发表单重新校验：

const enableEdit = (isNew = false) => {
  if (isNew) {
    // 调用表单内置reset方法清空所有字段
    reset({
      id: undefined,
      // 补充其他表单字段的初始空值
    })
  }
  setEditable(true)
}

// 修改New Service按钮的调用逻辑
<button 
  className='btn btn-form my-button--orange' 
  type='button'
  style={{margin: "5px"}}
  disabled={editable} 
  onClick={() => enableEdit(true) }
>
  New Service
</button>

同表单多提交操作实现方案 #

通用实现方式分为两种：

1. 操作类型标识法：提交时传入操作类型参数，在回调中分支执行逻辑，适合操作差异较小的场景

   // 封装多类型提交处理函数
   const handleMultiSubmit = (operateType) => async (data) => {
     switch(operateType) {
       case 'create':
         await dispatch(actions.createService(data))
         break
       case 'update':
         await dispatch(actions.updateService(data.id, data))
         break
       case 'draft':
         await dispatch(actions.saveServiceDraft(data))
         break
     }
   }
   
   // 不同按钮绑定对应类型
   <button onClick={(e) => handleEdit(handleSubmit(handleMultiSubmit('create')), e)}>新增保存</button>
   <button onClick={(e) => handleEdit(handleSubmit(handleMultiSubmit('update')), e)}>编辑保存</button>
   <button onClick={(e) => handleEdit(handleSubmit(handleMultiSubmit('draft')), e)}>存草稿</button>
   

2. 独立回调法：不同操作对应完全独立的提交处理函数，适合操作逻辑差异较大的场景，避免单个回调函数过于臃肿。

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