Formik 对象不渲染

Question

我创建了一个名为

<FormInput>

的自定义输入，并对其应用了

useField()

和

useFormikContext()

：

const [field, meta] = useField(props);
const { setFieldValue } = useFormikContext();

<FormInput>

是名为

UI

的库的一部分。我正在导入该库并尝试创建一个非常简单的表单来测试，一个字段，唯一的验证是它是必需的：

import React, { useContext } from "react";
import { DataContext } from "../../context/DataContext";
import * as UI from "@tui/uilibrary";
import { composeThemeFromProps } from "@css-modules-theme/react";
import styles from "./EnrollStep5.module.scss";

import { Formik, Form } from "formik";
import * as Yup from "yup";

const EnrollStep5 = (props) => {
  const context = useContext(DataContext);
  const theme = composeThemeFromProps(styles, [context, props]);

  return (
    <Formik
      initialValues={{
        name: "",
      }}
      validationSchema={Yup.object().shape({
        name: Yup.string().required("Required"),
      })}
    >
      {(props) => {
        <Form className={theme.EnrollStep2}>
          <UI.FormInput type={"text"} name={"name"} label={"Name"} />
        </Form>;
      }}
    </Formik>
  );
};

export default EnrollStep5;

这显示为空白。 Formik 对象出现在组件浏览器中，但显示为好像没有子对象。我感觉这只是由于缺乏经验而我已经很接近了。我做错了什么？

Answer 1

简而言之： 将

<Form>...</Form>

括在（括号）而不是{大括号}中。

更详细一点：
因此，基本上，使用大括号的代码中发生的情况是您正在输入回调函数。所以

<Form>...</Form>

只是漂浮在函数体内的某个地方。你打算做的就是退货。
因此，您可以在大括号内添加 return 语句（

return <Form>...</Form>;

），也可以不进入函数体而直接返回值。例如。例如

(props) => <Form>...</Form>

或

(props) => (<Form>...</Form>)

，无论您喜欢哪个。

Answer 2

您需要在

<Field>

组件内部使用

<Form>...</Form>

组件，如下所示：

<Formik initialValues={{name: ""}}>
  <Form>
    <Field name="name" placeholder="Name:"></Field>
  </Form>
</Formik>

<Field>

组件会将它们的值传递给formik，它可以处理提交等。
您可以创建自定义 Field 组件：

<Formik initialValues={{ name: "" }}>
  <Form>
    <Field name="name" placeholder="Name:">
       {({ field }) => (
         <CustomInputComponent {..field} />
       )}
    </Field>
  </Form>
</Formik>

<CustomInputComponent>

应包含 html

<input/>

元素，或者您可以使用 flowbite、materialUI 输入组件，如下所示。

如果您想将 error 或 touched 对象传递给自定义组件，您应该尝试以下解决方案：

<Formik initialValues={{ name: "" }}>
    {({ values, errors, touched }) => (
      <Form>
        <Field name="name" placeholder="Name:">
          {({ field }) => (
            <CustomInput {...field} errors={errors} value={values}/>
          )}
        </Field>
      </Form>
    )}
</Formik>