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

Question

我正在考虑采用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 存储。

问题

是否有可能与反应最终形式有关？我将如何从该async onChange处理程序更新表单状态？

标签： reactjsasynchronousreact-final-formform-fields