如何访问 Yup 模式中的上下文

Question

我正在使用react-hook-form库Yup来管理我的应用程序中的表单。

我正在尝试根据我的组件状态创建动态 Yup 模式。

例如：

import React, { useContext } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { FirstFormContext } from "../context/FirstFormContext";
import { SecondFormContext } from "../context/SecondFormContext";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object().shape({
  email: yup.string().email().min(2), // <-- Here I want to access the value
  address: yup.string().min(2).max(20)
});

const SecondForm = () => {
  const { secondFormData, setSecondFormData } = useContext(SecondFormContext);
  const { firstFormData } = useContext(FirstFormContext);
  const { register, handleSubmit } = useForm({
    resolver: yupResolver(schema),
    context: firstFormData.type // <---- Passing the variable
  });
  const history = useHistory();

  const onSubmit = (data) => {
    setSecondFormData(data);
    history.push("/end-page");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <button
        style={{ display: "block", marginBottom: "20px" }}
        onClick={() => history.push("/")}
      >
        Go back
      </button>
      {firstFormData.type === "one" ? (
        <input
          defaultValue={secondFormData.email}
          placeholder="email"
          {...register("email", { required: true })}
        />
      ) : firstFormData.type === "two" ? (
        <input
          defaultValue={secondFormData.address}
          placeholder="address"
          {...register("address", { required: true })}
        />
      ) : null}

      <button type="submit" style={{ display: "block", marginTop: "20px" }}>
        Next
      </button>
    </form>
  );
};

export default SecondForm;

正如您所看到的，在我的组件内，我将上下文传递给useFormhook，并且我想在组件上方的 Yup 架构中访问它SecondForm。

我怎样才能实现它？

谢谢。

Answer 1

我是这样解决的：

内useForm钩

const { register, handleSubmit } = useForm({
    resolver: yupResolver(schema),
    context: { type: firstFormData.type }
  });

在我的schema：

const schema = yup.object().shape({
  email: yup
    .string()
    .email()
    .min(2)
    .when("$type", (type, schema) => {
      console.log(type);
      if (type === "one") {
        return schema.required();
      }
      return;
    }),
  address: yup.string().min(2).max(20)
});