"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"));

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

的更多信息

Answer 2

您可以使用：

console.log('form values:'+ JSON.stringify(formik.values));

"object Object" 在 ReactJS 上显示为 Formik 表单的输入值

"object Object" showing as input value with Formik forms on ReactJS

default

object

reactjs

formik