使用 Formik 和 GatsbyJS 的高阶组件、道具答案

【问题标题】：Higher Order Components, Props with Formik & GatsbyJS使用 Formik 和 GatsbyJS 的高阶组件、道具
【发布时间】：2020-01-10 10:43:54
【问题描述】：

我正在尝试使用 withFormik 高阶组件（而不是使用渲染道具）在 Gatsby 站点中创建 Formik 表单。

这是我的代码的简化版本：

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

    const TestPage = ({ handleChange, values }) => (
      <div>
        <input
          type="email"
          name="email"
          placeholder="Email"
          onChange={handleChange}
          value={values.email}
        />
      </div>
    )

    const FormikTest = withFormik({
      mapPropsToValues() {
        return {
          email: 'test@test.com',
        }
      },
    })


    export default FormikTest(TestPage)

到目前为止，一切都如我所愿。但是，在为mapPropsToValues 对象中的电子邮件字段设置条件参数时，我遇到了一个问题。您可以通过观看大约 1 分钟的本教程来了解我想要做什么（它设置为正确的开始时间）：https://www.youtube.com/watch?v=yNiJkjEwmpw&feature=youtu.be&t=717

问题是我不知道如何使用 Gatsby 将道具发送到 mapPropsToValues。我无法像该教程中那样访问render。

换句话说，在 Create React App 中，您可以执行以下操作：


    const FormikTest = withFormik({
      mapPropsToValues({ email }) {
        return {
          email: email || '',
        }
      },
    })(TestPage)

    render(<FormikTest email="test@test.com />, document.getElementById('#root'))

但我无法访问 Gatsby 中的 render 或 <FormikTest /> 组件。

因此，知道如何将 props 传递给 mapPropsToValues，以便我可以使用 Gatsby 有条件地为电子邮件表单设置初始值吗？

谢谢。

更新

我使用 Formik 创建了一个简单的 Codesandbox 版本，它只有一个页面。这是链接：https://codesandbox.io/s/gatsby-starter-default-270gs?fontsize=14

这是该页面的代码：

import React from "react"
import { withFormik } from "formik"

const IndexPage = ({ handleChange, values }) => (
  <div>
    <input
      type="email"
      name="email"
      placeholder="Email"
      onChange={handleChange}
      value={values.email}
    />
  </div>
)

const FormikTest = withFormik({
  mapPropsToValues() {
    return {
      email: "",
    }
  },
})

export default FormikTest(IndexPage)

【问题讨论】：

标签： reactjs gatsby formik higher-order-components

【解决方案1】：

在那篇教程中，他将所有内容都定义在一个文件中，因此他使用渲染的原因是（当您导入组件时，React 在后台执行的操作）。在您的情况下，TestPage 组件将用作另一个组件中的子组件，例如：

render(){
    return (<TestPage email = "test@example.com"/>);
}

mapPropsToValues 将获取作为参数传入的道具，并且“电子邮件”将成为这些道具的成员

【讨论】：

我不是 100% 遵循我应该做的事情。我使用要更改的代码创建了一个单页 Codesandbox。如果您不介意，您能否看一下并向我展示如何将您的解决方案实施到我正在尝试做的事情中？这是链接：codesandbox.io/s/gatsby-starter-default-270gs?fontsize=14
@Moshe 看看这里：codesandbox.io/s/gatsby-with-formik-lsq6t?fontsize=14

【解决方案2】：

您可以访问传递给mapPropsToValues 中组件的任何道具。尝试立即通过withFormik 传递您的基本组件，同时将函数作为导出返回 - 这将允许您设置任何所需的道具。

const FormikTest = withFormik({
  mapPropsToValues(props) {
    console.log(props) // { rad: "yas" }

    return {
      email: "",
    }
  },
})(IndexPage)

export default () => <FormikTest rad="yas" />

【讨论】：