我可以为 react-final-form 字段设置异步 onChange 处理程序吗？如何从异步函数更新表单状态？

如何解决我可以为 react-final-form 字段设置异步 onChange 处理程序吗？如何从异步函数更新表单状态？

我正在考虑采用 react-final-form 来构建一些我在网络应用中使用的管理表单。

我需要为图片上传构建一个输入组件，它应该能够执行以下操作。

• 这是一个 <input type="file"/> 元素
• 应选择图像文件
• 该文件应上传到存储桶 (ASYNC)
• 并且返回的 URL（来自上传）应该添加到表单上的字段值中
• 加载状态也应该在上传过程中触发

例如：

1.初始字段状态

formState: 
  values: {
     thumbnail: {
        status: "IDLE"
        src: ""
     }
  }
  // OTHER FIELDS' VALUES
}

2.上传过程中

formState: 
  values: {
     thumbnail: {
        status: "UPLOADING"
        src: ""
     }
  }
  // OTHER FIELDS' VALUES
}

3.上传后

formState: 
  values: {
     thumbnail: {
        status: "IDLE"
        src: "THE_URL_RETURNED_FROM_THE_UPLOAD_API"
     }
  }
  // OTHER FIELDS' VALUES
}

当然，我也会处理来自 API 的验证（图像最大尺寸等）和可能的错误。但这个简化版很好地说明了我的要求。

PS：我目前正在使用我自己的自定义表单解决方案（它使用 Redux 状态，因此我使用 redux-thunks 来处理状态的异步更改）来执行此操作。

我想使用 react-final-form 的主要原因是将表单状态移出我的 Redux 存储区。

问题

是否可以使用 React 的最终形式？我将如何从 async onChange 处理程序更新表单状态？