Formik - Как сбросить форму после подтверждения - PullRequest
Новая
       13

Formik - Как сбросить форму после подтверждения

0 голосов
/ 09 апреля 2019

В Formik , как заставить кнопку Сброс сбросить форму только после подтверждения ?

Мой код ниже по-прежнему сбрасывает форму, даже когда вы нажимаете Отмена.

var handleReset = (values, formProps) => {
    return window.confirm('Reset?'); // still resets after you Cancel :(
};

return (
  <Formik onReset={handleReset}>
    {(formProps) => { 
      return (
        <Form>
          ...
          <button type='reset'>Reset</button>
        </Form>
      )}}
  </Formik>
);

Ответы [ 2 ]

1 голос
/ 10 апреля 2019

Я не совсем уверен, но я думаю, вам придется написать собственную функцию сброса без кнопки типа reset. Как то так: 

const handleReset = (resetForm) => {
  if (window.confirm('Reset?')) {
    resetForm();
  }
};

function Example() {
  return (
    <Formik initialValues={{ value: 1 }}>
      {formProps => {
        return (
          <Form>
            <Field name="value" type="number" />
            <button
              onClick={handleReset.bind(null, formProps.resetForm)}
              type="button"
            >
              Reset
            </button>
          </Form>
        );
      }}
    </Formik>
  );
}

Если вы действительно хотите использовать onReset, я думаю, что единственный способ - выдать ошибку. Исходный код Formik , кажется, указывает, что resetForm() будет вызываться независимо от того, что возвращает ваша функция onReset(). 

const handleReset = () => {
  if (!window.confirm('Reset?')) {
    throw new Error('Cancel reset');
  }
};

function Example() {
  return (
    <Formik initialValues={{ value: 1 }} onReset={handleReset}>
      {formProps => {
        return (
          <Form>
            <Field name="value" type="number" />
            <button type="reset">
              Reset
            </button>
          </Form>
        );
      }}
    </Formik>
  );
}

Я бы все же выбрал первое решение, хотя лично.

0 голосов
/ 23 апреля 2019

Здравствуйте @Aximili, вы можете использовать resetForm в onSubmit. 

onSubmit={(values, { resetForm }) => {

      // do your stuff 
      resetForm();

}}

что resetForm может сделать?

Обязательно сбросьте форму. Это очистит ошибки и коснется их, установит isSubmitting в false, isValidating в false и повторно запустит mapPropsToValues ​​с реквизитами текущего WrappedComponent или тем, что передано в качестве аргумента. Последнее полезно для вызова resetForm в componentWillReceiveProps.

...