在组件之外访问 Formik 的值 | react

IT技术 reactjs formik
2021-05-06 10:02:10

一些资料

我在我的项目中使用 Formik，我的设置如下所示：

|-MenuModal
|--MenuEdit
|---MenuEditForm

和MenuModal的父级在哪里。该组件负责返回 Formik 表单，但我在它的 parent 中调用 submit ，它稍后通过 React 的 refs运行提交函数。乱？对！MenuEditMenuEditFormMenuEditFormMenuModalMenuEdit

我的问题

现在我想使用的状态和回调函数来获取Formiksvalues从MenuEditForm到MenuEdit。但由于我没有使用 Formiks 自己的onSubmit：

    <Formik
        initialValues={menu}
        validationSchema={validationSchema}
        onSubmit={values => console.log('values', values)} // 'values' is undefined
        ...

我的values遗嘱是未定义的，我无法让我的提交功能通过。

所以我想知道如何访问我的valuesinMenuEditForm以便我以后可以将它传递给MenuEdit并完成我的提交功能。

谢谢阅读。

3个回答

要访问 formik 组件之外的值，您可以使用钩子执行此操作：

      const formRef = useRef();

      return (
        <Formik
          ...
          innerRef={formRef}
        >
        ...
      </Formik>

然后，可以在组件之外的任何地方使用 formRef.current.values 访问值。

由于 formik 将值传递给 onChangeText 我们可以将其保存在 useState 中以进行动态更新

  onChangeText={(value: string) => {
      handleChange('name')(value);
      setName(value);
  }}

您可以简单地传递一个函数来接收来自子组件的值。

例如：

菜单模式：

const MenuModal = () => {
  const [values, setvalues] = useState();
  return (
    ...
      <MenuEdit values={values} onFormSubmit={(values) => setvalues(values)} />
    ...
  );
}

菜单编辑：

const MenuEdit = ({values, onFormSubmit}) => {
    // do something with values
    return (
      ...
      <MenuEditForm onFormSubmit={onFormSubmit} />
      ...
    )
  ...  
}

菜单编辑表格：

const MenuEditForm = ({onFormSubmit}) => (
  ...
  <Formik
    initialValues={menu}
    validationSchema={validationSchema}
    onSubmit={values => onFormSubmit(values)}
  ...
)
其它你可能感兴趣的问题
上一篇如何模拟在使用 Jest 测试的 React 组件中进行的 API 调用 下一篇FDM层结合强度