将 React Dropzone 与 React Final Form 一起使用答案

【问题标题】：Using React Dropzone together with React Final Form将 React Dropzone 与 React Final Form 一起使用
【发布时间】：2019-08-13 18:13:54
【问题描述】：

试图弄清楚如何一起使用这两个组件。人们参考an issue on github 来启动并运行它，但我无法弄清楚。它的要点是：

<Field name={`logo`}>
  {(fieldprops) => (
    <div>
      <label>Logo</label>
      <Dropzone 
        onDrop={(files, e) => {
          props.change(`logo`, files);
          props.blur(`logo`);
        }}
      />
      <pre>{JSON.stringify(fieldprops, 0, 2)}</pre>
    </div>
  )}
</Field>

使用准确的代码会抛出错误：TypeError: children is not a function

我在Code Sandbox 上设置了一个简化的测试用例，它使用挂钩和文件预览。我还尝试查看文档中的custom inputs，但似乎缺少一些东西才能使其正常工作。如果有人能指出我正确的方向，我会非常高兴。

【问题讨论】：

把props改成fieldprops
@Train 谢谢你的建议，它确实抛出了同样的错误，它不是指我最初写的那行，它只是抛出：TypeError: children is not a function
您的示例也有一个 render={...}，但您缺少了
您的意思是我帖子中的代码中缺少它？这只是他们在问题中提到的代码沙箱的一小段摘录。我的意思是我直接拿了这个例子并尝试实施，但它抛出了错误。我在帖子底部链接到的测试用例是我目前正在使用的以及将 dropzone 包含到表单中的内容！
我认为自该问题发布以来（2018 年初），dropzone 和最终形式都经历了一些重大改写

标签： reactjs react-hooks react-final-form react-dropzone

【解决方案1】：

您的Dropzone 组件中没有onChange 回调。这个怎么样？

【讨论】：

太棒了，谢谢！我终于找到了让它工作，但它没有这样干净，哈哈。不过，您的演示与我当前的实现存在相同的问题。重置表单不会从预览中清除图像！
一个例子很好，但发现小问题！当我们删除图像并点击提交时，图像仍然存在。
这一行作为 { form.change('image', undefined)}} 的道具解决了这个问题。