reactjs Formik -确认后如何重置表单

kse8i1jr  于 2022-12-29  发布在  React
关注(0)|答案(5)|浏览(181)

Formik中,如何使Reset按钮只在确认后**才重置表单?
下面的代码即使在您单击“取消”时仍会重置窗体。

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

swvgeqrz1#

您可以在onSubmit中使用resetForm

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

      // do your stuff 
      resetForm();

}}

resetForm能做什么?

强制重置表单。这将清 debugging 误和touched,将isSubmitting设置为false,将isValidating设置为false,并使用当前WrappedComponent的属性或作为参数传递的属性重新运行mapPropsToValues。后者对于在componentWillReceiveProps中调用resetForm非常有用。

cotxawn7

cotxawn72#

我不完全确定,但我认为你必须编写自己的reset函数,而不使用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源代码似乎表明无论你的onReset()函数返回什么,resetForm()都会被调用。

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

我个人还是会选择第一种解决方案。

mhd8tkvw

mhd8tkvw3#

我知道OP的问题是关于Formik的。
然而,对于任何使用useFormik钩子并希望在单击“reset”按钮时清除表单的人来说,这里有一种方法可以实现这一点。
<button type="reset" onClick={ e => formik.resetForm()}> Reset</button>

vh0rcniy

vh0rcniy4#

我的问题是我不想使用window.confirm()。我想使用我自己的模态,所以我使用了
使用表单上下文()
您可以创建如下所示的功能组件

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();
}

Reference

zqdjd7g9

zqdjd7g95#

解决方案如下:

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

提交时立即重置表单。
我没有在Formik周围使用自定义 Package 器。

相关问题