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

【问题标题】：File input validation using React Hook Form and Yup使用 React Hook Form 和 Yup 进行文件输入验证
【发布时间】：2021-11-05 07:47:50
【问题描述】：

我尝试使用 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);
    }}
    />
  );
};

【问题讨论】：

给任何使用这个作为参考的人的小提示，我使用了这个问题中的 Yup 测试用例作为参考，但他们遇到了一个错误，验证方案将通过所有字段，而不仅仅是文件输入，如果表单提交时没有任何文件。这是因为在这种情况下测试用例中value参数的长度是0，所以value[0]会导致错误。这可以通过在value[0] 的所有实例之后添加? 来解决此问题

标签： reactjs validation yup react-hook-form

【解决方案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

【讨论】：