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

Question

我在提交表单时遇到 React 挂钩表单和 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
    />
  )}
/>

Here is the link to the forked source code

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

react-hook-form material ui file upload not giving FileList

reactjs

material-ui

yup

react-hook-form