Можно ли тайм-аут и скрыть сообщение об ошибке формы через некоторое время в Formik? - PullRequest
Новая
       8

Можно ли тайм-аут и скрыть сообщение об ошибке формы через некоторое время в Formik?

0 голосов
/ 20 января 2019

Как я могу скрыть сообщение об ошибке формы через некоторое время в Formik (Библиотека форм React).

Есть ли какой-либо метод в 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, но это не работает.Любая альтернатива?

1 Ответ

0 голосов
/ 21 января 2019

Когда вы делаете setTimeout(resetForm(), 2000), вы не передаете функцию (вы вызываете ее) на setTimeout.Вы должны сделать setTimeout(resetForm, 2000).Если вы хотите сбросить ошибки, вы можете использовать setErrors, как в примере https://codesandbox.io/s/941jzvx01p

...