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

问题描述

我正在尝试构建一个可重复使用的输入文件，如下所示。

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]。

接下来我可以尝试什么？

解决方法

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

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