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
    />
  )}
/>

这是分叉源代码的链接