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

我正在使用

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;

import React，{useContext}来自“React”；
从“react hook form”导入{useForm}；
从“react router dom”导入{useHistory}；
从“./context/FirstFormContext”导入{FirstFormContext}；
从“./context/SecondFormContext”导入{SecondFormContext}；
从“@hookform/resolvers/yup”导入{yupResolver}”；
从“yup”导入*作为yup；
const schema=yup.object（）.shape({
电子邮件：yup.string（）.email（）.min（2），//{
const{secondFormData，setSecondFormData}=useContext（SecondFormContext）；
const{firstFormData}=useContext（FirstFormContext）；
常量{register，handleSubmit}=useForm({
解析程序：yupResolver（模式），
上下文：firstFormData.type//{
设置secondformdata（数据）；
历史记录。推送（“/结束页”）；
};
返回(
history.push（“/”}
>
回去
{firstFormData.type==“一个”(
)：firstFormData.type==“两个”(
)：null}
下一个
);
};
导出默认的第二种形式；

如您所见，在我的组件中，我将上下文传递给

useForm

hook，我希望在

SecondForm

组件上方的Yup模式中访问它

我怎样才能做到呢

谢谢。

我就是这样解决的：

内部

useForm

hook

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

在我的

模式中

：

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)
});