Question

一段时间后如何在Formik（反应性表单库）中隐藏表单的错误消息。

Formik中有什么方法吗？它显示名称为必填，电子邮件为必填，邮件为必填。但是我想在一段时间后将其隐藏。

这是我的代码：

import React from 'react';
import { withFormik, Form, Field } from 'formik';
import * as Yup from 'yup';
import './contact.scss';

const Contact = ({ errors, touched }) => {
  return (
    <section className="c-section c-contact u-padding-v-xlarge">
      <h1>Get in touch</h1>
      <p>We&apos;ll love to hear from you!</p>
      <Form>
        <div>
          {touched.name && errors.name ? (
            <p style={{ color: 'red' }}>{errors.name}</p>
          ) : null}
          <Field
            id="Name"
            type="text"
            name="name"
            autoComplete="name"
            placeholder="Your Name"
          />
        </div>
        <div>
          {touched.email && errors.email ? (
            <p style={{ color: 'red' }}>{errors.email}</p>
          ) : null}
          <Field
            id="message"
            type="email"
            name="email"
            autoComplete="email"
            placeholder="Your Email"
          />
        </div>
        <div>
          {touched.message && errors.message ? (
            <p style={{ color: 'red' }}>{errors.message}</p>
          ) : null}
          <Field
            component="textarea"
            name="message"
            id="message"
            placeholder="Your Message"
          />
        </div>
        <button type="submit" className="button button--success button--block">
          Send Message
        </button>
      </Form>
    </section>
  );
};

export default withFormik({
  mapPropsToValues: () => ({
    name: '',
    email: '',
    message: '',
  }),
  validationSchema: Yup.object().shape({
    name: Yup.string().required('Name is required'),
    email: Yup.string()
      .email('Email not valid')
      .required('Email is required'),
    message: Yup.string().required('Message is required'),
  }),
  handleSubmit: (values, { resetForm }) => {
    // Handle http request here
    console.log(values);
    setTimeout(resetForm(), 2000);
  },
})(Contact);

我尝试setTimeout(resetForm(), 2000);传递resetForm，但不起作用。还有其他选择吗？

Answer 1

执行setTimeout(resetForm(), 2000)时，没有将函数（正在调用它）传递给setTimeout。您应该执行setTimeout(resetForm, 2000)。如果您想重置错误，可以像示例https://codesandbox.io/s/941jzvx01p

那样使用setErrors

在Formik中过一段时间后是否可以超时并隐藏表单的错误消息？

1 个答案: