Formik - 确认后如何重置表格

Posted

技术标签:

【中文标题】Formik - 确认后如何重置表格【英文标题】:Formik - How to reset form after confirmation 【发布时间】:2019-08-30 05:11:04 【问题描述】:

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

【问题讨论】:

【参考方案1】:

您好@Aximili,您可以在 onSubmit 中使用 resetForm

onSubmit=(values,  resetForm ) => 

      // do your stuff 
      resetForm();


resetForm 能做什么?

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

【讨论】:

【参考方案2】:

如果使用useFormik 钩子,则在 onClick 事件上使用formik.resetForm(),或者如果您正在使用&lt;Formik&gt; 组件,则可以这样做:

onSubmit=(values,  setSubmitting, resetForm ) => 
    // your code
    resetForm();

【讨论】:

你为什么要复制答案。【参考方案3】:

我不完全确定,但我认为您将不得不编写自己的重置函数,而无需使用 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 似乎表明无论您的 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>
  );

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

【讨论】:

谢谢你 MadScone。是的,你可以这样做,但 Formik 已经有 onReset,所以我认为应该有办法做到这一点 如果你真的想使用onReset,我用一个可能的解决方案更新了我的答案。 非常感谢您查看源代码,这看起来像是 Formik 的限制。我会选择你的第一个解决方案:)【参考方案4】:

我了解 OP 的问题是针对 Formik

但是,对于使用 useFormik 钩子并希望在单击“重置”按钮时清除表单的任何人,这是实现此目的的一种方法。

&lt;button type="reset" onClick= e =&gt; formik.resetForm()&gt; Reset&lt;/button&gt;

【讨论】:

我来这篇文章是为了寻找这个答案。这正是我所需要的,因为 React Hooks。【参考方案5】:

我的问题是我不想使用 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();

Reference

【讨论】:

以上是关于Formik - 确认后如何重置表格的主要内容,如果未能解决你的问题,请参考以下文章

使用 Formik 的 React-Native 选择器

如何在reactjs中重置表单和登录错误消息

防止多步 Formik 表单在重新渲染上一步时重置表单控件输入

重置Jenkins的build序号

Firebase Auth 密码重置:如何正确发送包含确认码的密码重置电子邮件?

Parse Server - 如何翻译邮件确认页面和密码重置页面