Yup + useFormik -基于某些参数的条件必填字段

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  field1: Yup.string().required('Field 1 is required'),
  field2: Yup.string()
    .when('field1', {
      is: (value) => value === 'specificValue',
      then: Yup.string().required('Field 2 is required when field 1 is specific value'),
      otherwise: Yup.string()
    })
});

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      field1: '',
      field2: ''
    },
    validationSchema,
    onSubmit: (values) => {
      // 处理表单提交
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="field1">Field 1:</label>
      <input
        id="field1"
        name="field1"
        type="text"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.field1}
      />
      {formik.touched.field1 && formik.errors.field1 && (
        <div>{formik.errors.field1}</div>
      )}

      <label htmlFor="field2">Field 2:</label>
      <input
        id="field2"
        name="field2"
        type="text"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.field2}
      />
      {formik.touched.field2 && formik.errors.field2 && (
        <div>{formik.errors.field2}</div>
      )}

      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;