reactjs - “object Object”在 ReactJS 上使用 Formik 表单显示为输入值

Question

使用Formik时，我的输入会显示一个[object Object]值，而不是以标准方式表现。

代码在这里。

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import "./styles.css";

const SignupForm = () => {
  return (
    <Formik
      initialValues={{ email: "" }}
      validationSchema={Yup.object({
        email: Yup.string()
          .email("Mauvais e-mail")
          .required("Champ requis")
      })}
      onSubmit={values => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      <Form>
        <label htmlFor="email">Email</label>
        <ErrorMessage name="email" />
        <br />
        <Field name="email" type="email" />
        <button type="submit">OK</button>
      </Form>
    </Formik>
  );
};

ReactDOM.render(<SignupForm />, document.querySelector("#root"));

标签： reactjsobjectdefaultformik

Answer 1

Formik将初始值与name字段的 匹配，而不是id.

尝试使用它作为你的Field：

<Field name="email" id="email" type="email" />

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import "./styles.css";

const SignupForm = () => {
  return (
    <Formik
      initialValues={{ email: "" }}
      validationSchema={Yup.object({
        email: Yup.string()
          .email("Mauvais e-mail")
          .required("Champ requis")
      })}
      onSubmit={values => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {props => (
        <Form>
          <label htmlFor="email">Email</label>
          <ErrorMessage name="email" />
          <br />
          <Field
            name="email"
            id="email"
            type="email"
            onChange={e => {
              props.setTouched({ email: true });
              props.handleChange(e);
            }}
          />
          <button type="submit">OK</button>
        </Form>
      )}
    </Formik>
  );
};

ReactDOM.render(<SignupForm />, document.querySelector("#root"));

您还可以查看文档以获取更多信息Field