在组件之外访问 Formik 的值 |反应答案

【问题标题】：Access Formik's values outside of component | React在组件之外访问 Formik 的值 |反应
【发布时间】：2018-07-16 14:25:17
【问题描述】：

一些信息

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

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

其中MenuModal 是MenuEdit 和MenuEditForm 的父级。组件MenuEditForm 负责返回Formik 表单，但我在它的父级MenuModal 中调用提交，它稍后通过React 的引用在MenuEdit 中运行提交函数。乱？是的！

我的问题

现在我正在尝试使用状态和回调函数将 Formiks values 从 MenuEditForm 获取到 MenuEdit。但是由于我没有使用Formiks自己的onSubmit：

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

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

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

感谢阅读。

【问题讨论】：

标签： reactjs formik

【解决方案1】：

要访问 formik 组件之外的值，您可以使用钩子来做到这一点：

      const formRef = useRef();

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

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

【讨论】：

知道为什么在文档中找不到 innerRef 道具吗？
@AbrahamL can be found here

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

例如：

菜单模式：

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)}
  ...
)

【讨论】：