Блог

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

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

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

      // do your stuff 
      resetForm();

}}
  

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

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

Я не совсем уверен, но думаю, вам придется написать свою собственную функцию сброса без кнопки с 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>
  );
}
  

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

Я понимаю, что вопрос OP был для Formik .

Однако для всех, кто использует useFormik hook и хочет очистить форму нажатием кнопки «Сброс», вот один из способов добиться этого.

<button type="reset" onClick={ e => formik.resetForm()}> Reset</button>

Моя проблема заключалась в том, что я не хотел использовать window.confirm(). Я хотел использовать свой собственный модальный, поэтому я использовал

Используйте formikcontext()

Вы можете создать функциональный компонент, подобный этому

 let resetPresForm = {};// You will have to define this before useEffect

const ResettingForm = () => {
    const { resetForm } = useFormikContext();
    resetPresForm = resetForm; // Store the value of resetForm in this variable
    return null;
};
  

Теперь импортируйте этот функциональный компонент в свой

 <Formik>
     <button type="button" onClick={() => { setShowResetModal(true) }} className="comman-btn">Reset</button>
     <ResettingForm />
</Formik>
  

Теперь при подтверждении модального компонента вы можете

 const resetPrescriptionForm = () => {
    setShowResetModal(false);
    resetPresForm();
}
  

Ссылка

Вот решение:

 <Formik
initialValues={initialValues}
onSubmit={async (values, { resetForm }) => {
  await onSubmit(values)
  resetForm()
}}>
  

Немедленно сбросьте форму при отправке.

Я не использую пользовательскую оболочку вокруг Formik.

в 2023 году formik.resetForm(); у меня это сработало.

вот полный код для onSubmit события

   onSubmit:(values)=>{
const name = values.name;
      const mobile = values.mobile;
      const website = values.website;
      const service = values.service;
      const msg = values.msg;
  
axios.post('/api/SendContactForm', {name, mobile, website, service, msg})
      .then(function (response) {
           //console.log(response);
              toast.success('👋 Thanks for the message. We will contact you asap.');
              formik.resetForm();
          })
          .catch(function (error) {
            console.log(error);
            formik.resetForm();
            toast.error(error.message || error.statusText);
          });
     
  
      }
  
  });

  

Я использовал actions.resetForm() , и Это решило проблему.

 onSubmit={(values, actions) => {

     actions.resetForm();

}}