Formik

Question

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

Answer 1

我不完全确定，但我认为您将不得不编写自己的不带 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 source code 似乎表明 resetForm() 将被调用，无论您的 onReset() 函数 returns.

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

我个人仍然会选择第一个解决方案。

Answer 2

你好@Aximili 你可以在 onSubmit 中使用 resetForm。

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

      // do your stuff 
      resetForm();

}}

resetForm可以做什么？

强制重置表单。这将清除错误和触摸，将 isSubmitting 设置为 false，将 isValidating 设置为 false，并使用当前 WrappedComponent 的 props 或作为参数传递的内容重新运行 mapPropsToValues。后者对于在 componentWillReceiveProps 中调用 resetForm 很有用。

Answer 3

我知道 OP 的问题是针对 Formik。

但是，对于任何使用 useFormik 挂钩并希望在单击 'reset' 按钮时清除表单的人来说，这是实现此目的的一种方法。

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

Answer 4

我的问题是我不想使用 window.confirm()。我想使用我自己的模态，所以我使用了

useFormikContext()

你可以像这样创建一个函数组件

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

Formik - 如何在确认后重置表格

Formik - How to reset form after confirmation

forms

reactjs