react-hook-form材料ui文件上传不给FileList

Question

我在提交表单时遇到了 react hook 表单和 material-ui 文件上传的问题我得到了一个文件的字符串路径而不是 FileList 实例

        <Controller
          name='attachments'
          control={control}
          defaultValue=''
          render={({ field }) => <input {...field} type='file' multiple />}
        />

       

codesanbox 上的完整代码：

https://codesandbox.io/s/xenodochial-bhaskara-9vo13?file=/src/App.js

Answer 1

要使其正常工作，您必须实现自己的onChange属性。 为此，您可以使用field.onChange回调并将文件列表作为参数传递给它。 这是如何做到的：

<Controller
  name="attachments"
  control={control}
  defaultValue=""
  render={({ field }) => (
    <input
      type="file"
      onChange={e => {
        field.onChange(e.target.files);
      }}
      multiple
    />
  )}
/>

这是分叉源代码的链接