Question

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

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

    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对象中的email字段设置条件参数时遇到一个问题。您可以通过观看本教程大约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 />组件。

因此，有什么想法可以将道具传递给mapPropsToValues，以便可以使用Gatsby有条件地为电子邮件表单设置初始值吗？

谢谢。

更新

我创建了一个简单的Codesandbox版本，使用Formik时只有一页。这是链接：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)

Answer 1

在该教程中，他将所有内容定义在一个文件中，因此他使用了渲染的原因（这是在导入组件时在幕后做出的反应）。在您的情况下，TestPage组件将用作另一个组件中的子组件，例如：

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
abstract class AuthImplementaion {

}
class Auth implements AuthImplementaion {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
  Future<String> SignIn(String _email, String _password) async{
    FirebaseUser user = (await _firebaseAuth.signInWithEmailAndPassword(email: _email, password: _password)).user;
    return user.uid;
  }
}

mapPropsToValues将获得作为参数传递的道具，而“ email”将成为这些道具的成员

Answer 2

您可以访问传递到mapPropsToValues中某个组件的所有道具。尝试将基本组件直接通过withFormik，同时将函数返回为导出-这样您就可以设置所需的道具。

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

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

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

高阶组件，Formik＆GatsbyJS的道具

2 个答案: