javascript - 具有 react-hook-form 逻辑的可重用输入文件

Question

我正在尝试按照以下方式构建可重用的输入文件。

function InputFileControl({ control, name, initialValue, ...rest }) {
  const {
    field: { ref, ...inputProps },
    fieldState: { invalid, error, isTouched },
  } = useController({
    name,
    control,
    rules: { required: true },
    defaultValue: initialValue,
  })
  return (
    <StyledGrid>
      <Grid item container>
        <input {...inputProps} inputRef={ref} {...rest} />
      </Grid>
      <Collapse in={invalid}>
        <Grid item container>
          <StyledAlert severity="error">{error && error.message}</StyledAlert>
        </Grid>
      </Collapse>
    </StyledGrid>
  )
}

对于使用，我的表单被声明的地方，这就是我使用它的方式：

<InputFileControl control={control} name="file" type="file" />

不幸的是，它不起作用。当我提交表单时，文件只是路径。没有要管理的文件[0]。

接下来我可以尝试什么？

Answer 1

我猜你会得到类似的东西C:\\fakepath\<filename>

这是一个可能的解决方案：React Hook Form with file just submit fakepath