具有 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 only submit fakepath