使用useFormik钩子在向导中访问Formik bag

import { useFormik } from 'formik';

const WizardStep = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
      password: '',
    },
    onSubmit: (values) => {
      // 在提交表单时执行的逻辑
      console.log(values);
    },
    validate: (values) => {
      // 表单验证逻辑
      const errors = {};
      if (!values.name) {
        errors.name = '必填';
      }
      if (!values.email) {
        errors.email = '必填';
      }
      if (!values.password) {
        errors.password = '必填';
      }
      return errors;
    },
  });

  const { values, errors, handleChange, handleSubmit } = formik;

  return (
    <form onSubmit={handleSubmit}>
      <label>
        姓名：
        <input type="text" name="name" value={values.name} onChange={handleChange} />
        {errors.name && <div>{errors.name}</div>}
      </label>
      <label>
        邮箱：
        <input type="email" name="email" value={values.email} onChange={handleChange} />
        {errors.email && <div>{errors.email}</div>}
      </label>
      <label>
        密码：
        <input type="password" name="password" value={values.password} onChange={handleChange} />
        {errors.password && <div>{errors.password}</div>}
      </label>
      <button type="submit">提交</button>
    </form>
  );
};

export default WizardStep;