如何使此Formik表单与自定义按钮一起工作?我无法将值获取到handleSubmit

Formik是一个用于构建表单的React库，它提供了一种简化表单处理的方式。要使Formik表单与自定义按钮一起工作，你可以按照以下步骤进行操作：

首先，确保你已经安装了Formik库。你可以使用以下命令进行安装：

npm install formik

在你的代码中导入Formik和相关的表单组件：

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

创建一个包含表单字段和验证规则的初始表单值对象。例如：

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

创建一个验证函数，用于验证表单字段的值。例如：

const validate = (values) => {
  const errors = {};

  if (!values.name) {
    errors.name = 'Required';
  }

  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
    errors.email = 'Invalid email address';
  }

  if (!values.password) {
    errors.password = 'Required';
  }

  return errors;
};

创建一个处理表单提交的函数。在这个函数中，你可以获取表单字段的值并执行相应的操作。例如：

const handleSubmit = (values) => {
  console.log(values);
  // 执行其他操作
};

在你的组件中使用Formik组件包裹表单，并将上述创建的函数和对象传递给Formik组件的相应属性。例如：

<Formik
  initialValues={initialValues}
  validate={validate}
  onSubmit={handleSubmit}
>
  <Form>
    <div>
      <label htmlFor="name">Name</label>
      <Field type="text" id="name" name="name" />
      <ErrorMessage name="name" component="div" />
    </div>

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

    <div>
      <label htmlFor="password">Password</label>
      <Field type="password" id="password" name="password" />
      <ErrorMessage name="password" component="div" />
    </div>

    <button type="submit">Submit</button>
  </Form>
</Formik>

在上述代码中，<Formik>组件包裹了整个表单，initialValues属性设置了初始表单值，validate属性设置了验证函数，onSubmit属性设置了提交处理函数。<Form>组件定义了表单的结构，<Field>组件定义了表单字段，<ErrorMessage>组件用于显示验证错误信息。

当用户点击提交按钮时，Formik会自动执行验证函数并调用提交处理函数。你可以在提交处理函数中获取表单字段的值，并执行相应的操作。

关于Formik的更多信息和用法，请参考腾讯云的相关产品和产品介绍链接地址。