13

一些信息

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

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

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

我的问题

现在我正在尝试使用状态和回调函数将 Formiksvalues从MenuEditFormto获取MenuEdit。但由于我没有使用 Formiks own onSubmit：

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

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

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

谢谢阅读。

4

3 回答 3

31

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

      const formRef = useRef();

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

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

于 2020-03-04T22:30:08.240 回答
2

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

  onChangeText={(value: string) => {
      handleChange('name')(value);
      setName(value);
  }}
于 2021-08-08T07:41:52.950 回答
0

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

例如：

菜单模式：

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)}
  ...
)
于 2019-03-19T13:52:48.113 回答