禁用按钮，直到在Formik中填写完所有表单域

npm install formik

import { Formik, Form, Field, ErrorMessage } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ /* 初始化表单字段的值 */ }}
      validate={values => { /* 表单字段验证逻辑 */ }}
      onSubmit={values => { /* 表单提交逻辑 */ }}
    >
      <Form>
        {/* 表单域 */}
        <Field type="text" name="fieldName" />

        {/* 错误消息 */}
        <ErrorMessage name="fieldName" component="div" />

        {/* 提交按钮 */}
        <button type="submit" disabled={/* 判断是否禁用按钮 */}>
          提交
        </button>
      </Form>
    </Formik>
  );
};

<button type="submit" disabled={formikProps.isSubmitting || formikProps.isValidating || !formikProps.dirty}>
  提交
</button>

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ fieldName: '' }}
      validate={values => {
        const errors = {};
        if (!values.fieldName) {
          errors.fieldName = '必填字段';
        }
        return errors;
      }}
      onSubmit={values => {
        // 处理表单提交逻辑
      }}
    >
      {formikProps => (
        <Form>
          <Field type="text" name="fieldName" />
          <ErrorMessage name="fieldName" component="div" />
          <button type="submit" disabled={formikProps.isSubmitting || formikProps.isValidating || !formikProps.dirty}>
            提交
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default MyForm;