使用React Hook Form和Yup进行文件输入验证

Question

我尝试使用React Hook Form和Yup进行文件输入验证。我写了下面的代码，但是当我测试文件的大小时，它显示我这里的console.log(value[0].size);值是未定义的，即使我在文件输入中选择了一个文件。有什么问题吗?

我使用FormProvider和useFormContext。

在我的Parent.js中，我有这样的代码:

const Parent = () => {
const addingProcess = () => {
//..
};
const validationSchema = Yup.object().shape({
photo: Yup.mixed()
.required("You need to provide a file")
.test("fileSize", "File Size is too large", (value) => {
console.log(value[0].size);
return value[0].size <= 5242880;
})
.test("fileType", "Unsupported File Format", (value) =>
["image/jpeg", "image/png", "image/jpg"].includes(value.type)
),
});
const methods = useForm({
mode: "onSubmit",
resolver: yupResolver(validationSchema),
});
const { handleSubmit } = methods;
return (
<Wrapper>
<FormProvider {...methods}>
<Form onSubmit={handleSubmit(addingProcess)}>
<Photos />
</Form>
</FormProvider>
</Wrapper>
);
};

在我的Photos.js中我有:

const Photos = () => {
return (
<Wrapper>
<PhotoHolder/>
</Wrapper>
);
};
export default Photos;

在我的PhotoHolder.js文件中我有这个(是的，我需要像这样有onChange):

const PhotoHolder = () => {
const { register } = useFormContext();
const validator = register("photo");
return (
<Input
name="photo"
type="file"
multiple
onChange={(e) => {
validator.onChange(e);
}}
/>
);
};

Answer 1

我认为你可以使用函数useControl使用如下渲染:

<Controller
control={control}
name="photo"
render={({ field: { onChange, onBlur, value, ref } }) => (
<Photos
onBlur={onBlur}
value={value}
onChange={onChange}
{...field}
/>
)}
/>

通过这种方法，我们可以验证自定义输入，这里的关键概念是我们必须将控件对象和和字段传递到自定义输入组件。

有关更多信息，请访问此文档https://react-hook-form.com/api/usecontroller/controller