react hook form: materail ui: Textfield: onSubmit, 不在数据中传递 Filelist

Question

我正在尝试输入如下文件

          <Controller
            name="photo"
            control={control}
            render={({ field: { ref, ...field } }) => (
              <TextField
                {...field}
                inputRef={ref}
                fullWidth
                label="photo"
                margin="dense"
                accept="image/*"
                type="file"
                error={errors.photo ? true : false}
                InputLabelProps={{
                  shrink: true,
                }}
              />
            )}
          />

它给了我一个像 C:\facepath\filename.jpg

这样的值

如何获取onSubmit中的FileList对象

我也试过：

          <Controller
            name="photo"
            control={control}
            render={({ field: { ref, onChange, ...field } }) => (
              <TextField
                {...field}
                inputRef={ref}
                fullWidth
                label="photo"
                margin="dense"
                accept="image/*"
                type="file"
                error={errors.photo ? true : false}
                onChange={(event) => {
                  onChange(event.target.files);
                }}
                InputLabelProps={{
                  shrink: true,
                }}
              />
            )}
          />

这表示 Failed to set the 'value' property on 'HTMLInputElement'

而如果我使用

<input {...register("picture")} type="file" />

我可以看到在数据中传递的文件列表。

还有

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

这也是 returns 文件列表

Answer 1

controller 的这个结构将解决问题：

<form onSubmit={handleSubmit((d, e) => console.log(d))}>
  <Controller
    type="file"
    name="photo"
    control={control}
    render={({ field }) => (
      <TextField
        fullWidth
        label="photo"
        margin="dense"
        accept="image/*"
        type="file"
        onChange={(e) => {
          field.onChange(e.target.files);
        }}
        InputLabelProps={{
          shrink: true
        }}
      />
    )}
  />

react hook form: materail ui: Textfield: onSubmit, 不在数据中传递 Filelist

react hook form: materail ui: Textfield: onSubmit, not passing Filelist in the data

reactjs

material-ui

react-hook-form