使用Formik Yup验证动态创建的字段

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

const validationSchema = Yup.object().shape({
  fieldName: Yup.string()
    .required('字段不能为空')
    .min(3, '字段长度不能小于3')
    .max(10, '字段长度不能大于10'),
});

<Formik
  initialValues={{ fields: [] }}
  validationSchema={validationSchema}
  onSubmit={(values, { resetForm }) => {
    // 处理表单提交逻辑
    // values包含了所有输入框的值
    // resetForm用于重置表单状态
  }}
>
  {({ values, errors }) => (
    <Form>
      {values.fields.map((field, index) => (
        <div key={index}>
          <Field
            name={`fields[${index}]`}
            type="text"
            placeholder="输入字段值"
          />
          {errors.fields && errors.fields[index] && (
            <div>{errors.fields[index]}</div>
          )}
        </div>
      ))}
      <button type="button" onClick={() => {
        // 动态添加一个新的输入框
        setFieldValue('fields', [...values.fields, '']);
      }}>
        添加字段
      </button>
      <button type="submit">提交</button>
    </Form>
  )}
</Formik>