在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>
);
5条答案
按热度按时间swvgeqrz1#
您可以在onSubmit中使用
resetForm
。resetForm
能做什么?强制重置表单。这将清 debugging 误和touched,将isSubmitting设置为false,将isValidating设置为false,并使用当前WrappedComponent的属性或作为参数传递的属性重新运行mapPropsToValues。后者对于在componentWillReceiveProps中调用resetForm非常有用。
cotxawn72#
我不完全确定,但我认为你必须编写自己的reset函数,而不使用
reset
类型的按钮。如果你真的想使用
onReset
,我认为唯一的方法就是抛出一个错误,Formik源代码似乎表明无论你的onReset()
函数返回什么,resetForm()
都会被调用。我个人还是会选择第一种解决方案。
mhd8tkvw3#
我知道OP的问题是关于
Formik
的。然而,对于任何使用
useFormik
钩子并希望在单击“reset”按钮时清除表单的人来说,这里有一种方法可以实现这一点。<button type="reset" onClick={ e => formik.resetForm()}> Reset</button>
vh0rcniy4#
我的问题是我不想使用window.confirm()。我想使用我自己的模态,所以我使用了
使用表单上下文()
您可以创建如下所示的功能组件
现在将此函数组件导入到
现在在模态分量上确认你可以
Reference
zqdjd7g95#
解决方案如下:
提交时立即重置表单。
我没有在Formik周围使用自定义 Package 器。