如何在Formik子组件中获取更新后的表单值与错误信息？

当然可以获取，Formik提供了几种便捷的方式让嵌套的子组件访问表单状态和方法，以下是具体实现方式：

• 使用useFormikContext钩子：这是嵌套组件访问Formik状态最常用的方式，通过该钩子可以直接获取values、errors、handleChange等核心对象与方法：

import { useFormikContext } from 'formik';

const ChildStepComponent = () => {
  const { values, errors, handleChange } = useFormikContext();

  return (
    <div>
      <input
        name="username"
        value={values.username || ''}
        onChange={handleChange}
      />
      {errors.username && <div className="error">{errors.username}</div>}
    </div>
  );
};

• 通过props显式传递Formik属性：如果是类组件或倾向于显式传参，可以在父组件中将Formik的状态和方法作为props传给子组件：

// 父组件
<FormikComponent>
  <ChildStepComponent 
    values={formik.values} 
    errors={formik.errors} 
    handleChange={formik.handleChange} 
  />
</FormikComponent>

// 子组件
const ChildStepComponent = ({ values, errors, handleChange }) => {
  return (
    <>
      <input
        name="email"
        value={values.email || ''}
        onChange={handleChange}
      />
      {errors.email && <div className="error">{errors.email}</div>}
    </>
  );
};

• 使用Formik内置的Field与ErrorMessage组件：针对单个输入控件，直接使用Formik提供的Field组件可以自动关联表单状态，搭配ErrorMessage组件可快速展示错误提示：

import { Field, ErrorMessage } from 'formik';

const ChildStepComponent = () => {
  return (
    <div>
      <Field name="password" type="password" />
      <ErrorMessage name="password" component="div" className="error" />
    </div>
  );
};

内容的提问来源于stack exchange，提问作者H.b