Formik多步表单向导点击回退按钮传递表单值的实现咨询

你可以通过Formik提供的上下文能力获取values，不需要使用render props写法，分两种场景实现：

函数组件场景：使用useFormikContext钩子 #

1. 单独封装回退按钮组件，从Formik上下文中读取values

import { useFormikContext } from 'formik';

const BackButton = (props) => {
  // 直接从上下文获取当前表单所有值
  const { values } = useFormikContext();
  return (
    <button type="button" onClick={() => props.prev(values)}>
      Back
    </button>
  );
};

2. 原有Formik代码中直接使用封装好的组件即可：

<Formik
  validationSchema={stepTwoValidationSchema}
  initialValues={props.data}
  onSubmit={handleSubmit}
>
  <Form>
    <p>Email</p>
    <Field name="email" />
    <ErrorMessage name="email" />

    <p>Password</p>
    <Field name="password" />
    <ErrorMessage name="password" />

    <BackButton prev={props.prev} />
    <button type="submit">Submit</button>
  </Form>
</Formik>

类组件场景：使用withFormik高阶组件 #

如果你使用类组件无法使用Hook，可以用高阶组件包裹按钮组件读取上下文：

import { withFormik } from 'formik';
import React from 'react';

class BackButton extends React.Component {
  render() {
    const { values, prev } = this.props;
    return (
      <button type="button" onClick={() => prev(values)}>
        Back
      </button>
    );
  }
}

// 用withFormik包裹后，组件会自动注入Formik上下文的所有状态
const WrappedBackButton = withFormik(BackButton);

使用方式和函数组件封装的按钮一致，直接放在Form内部即可。

注意：封装的按钮组件必须放在Formik组件的内部，才能正常读取到表单上下文。

内容的提问来源于stack exchange，提问作者Harsha M V