在Formik中提交嵌套表单

import React from "react";
import { Formik, Field, FieldArray } from "formik";

const initialValues = {
  name: "",
  users: [
    { firstName: "", lastName: "" },
    { firstName: "", lastName: "" }
  ]
};

const onSubmit = (values) => {
  // 在这里处理表单的提交逻辑
  console.log(values);
};

const NestedForm = () => (
  <Formik initialValues={initialValues} onSubmit={onSubmit}>
    {({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <Field type="text" id="name" name="name" />
        </div>

        <FieldArray name="users">
          {({ push, remove }) => (
            <div>
              {values.users.map((user, index) => (
                <div key={index}>
                  <label htmlFor={`users[${index}].firstName`}>First Name:</label>
                  <Field
                    type="text"
                    id={`users[${index}].firstName`}
                    name={`users[${index}].firstName`}
                  />
                  <label htmlFor={`users[${index}].lastName`}>Last Name:</label>
                  <Field
                    type="text"
                    id={`users[${index}].lastName`}
                    name={`users[${index}].lastName`}
                  />
                  <button type="button" onClick={() => remove(index)}>
                    Remove
                  </button>
                </div>
              ))}
              <button type="button" onClick={() => push({ firstName: "", lastName: "" })}>
                Add User
              </button>
            </div>
          )}
        </FieldArray>

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

export default NestedForm;