onSubmit在react.js上不起作用，请使用Formik并刷新站点

基础概念

onSubmit 是 React 中用于处理表单提交事件的函数。当用户提交表单时，这个函数会被调用。Formik 是一个流行的 React 表单库，它简化了表单的状态管理和验证过程。

问题原因及解决方法

如果你在使用 onSubmit 时遇到问题，可能是因为没有正确地绑定事件处理函数或者没有正确地处理表单状态。使用 Formik 可以帮助你更好地管理表单状态和提交逻辑。

示例代码

以下是一个使用 Formik 和 onSubmit 的示例：

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

const initialValues = {
  name: '',
  email: '',
};

const onSubmit = (values, { setSubmitting }) => {
  setTimeout(() => {
    alert(JSON.stringify(values, null, 2));
    setSubmitting(false);
  }, 400);
};

const validate = (values) => {
  const errors = {};
  if (!values.name) {
    errors.name = 'Required';
  }
  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  return errors;
};

const MyForm = () => (
  <Formik
    initialValues={initialValues}
    onSubmit={onSubmit}
    validate={validate}
  >
    {({ isSubmitting }) => (
      <Form>
        <Field type="text" name="name" />
        <ErrorMessage name="name" component="div" />
        <Field type="email" name="email" />
        <ErrorMessage name="email" component="div" />
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    )}
  </Formik>
);

export default MyForm;