React formik validationSchema conditionalValidation

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email')
    .when('subscribe', {
      is: true,
      then: Yup.string().required('Email is required when subscribing'),
    }),
  subscribe: Yup.boolean(),
});

const initialValues = {
  email: '',
  subscribe: false,
};

const App = () => {
  const handleSubmit = (values) => {
    // 处理表单提交逻辑
  };

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      <Form>
        <div>
          <label htmlFor="email">Email</label>
          <Field type="email" id="email" name="email" />
          <ErrorMessage name="email" component="div" />
        </div>
        <div>
          <label htmlFor="subscribe">Subscribe</label>
          <Field type="checkbox" id="subscribe" name="subscribe" />
        </div>
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

export default App;