将字段动态添加到Formik表单

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

const initialValues = {
  // 初始表单值
  name: "",
  email: ""
};

const validationSchema = Yup.object({
  // 表单验证规则
  name: Yup.string().required("Required"),
  email: Yup.string().email("Invalid email").required("Required")
});

const App = () => {
  const [showAddress, setShowAddress] = useState(false); // 控制地址字段的显示与隐藏

  const toggleAddress = () => {
    setShowAddress(!showAddress);
  };

  return (
    <div>
      <h1>Form</h1>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        <Form>
          <div>
            <label htmlFor="name">Name</label>
            <Field type="text" id="name" name="name" />
          </div>

          <div>
            <label htmlFor="email">Email</label>
            <Field type="email" id="email" name="email" />
          </div>

          {showAddress && (
            <div>
              <label htmlFor="address">Address</label>
              <Field type="text" id="address" name="address" />
            </div>
          )}

          <button type="button" onClick={toggleAddress}>
            Toggle Address
          </button>

          <button type="submit">Submit</button>
        </Form>
      </Formik>
    </div>
  );
};

export default App;