在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>
);
你好@Aximili，你可以resetForm在onSubmit 中使用。
onSubmit={(values, { resetForm }) => {
// do your stuff
resetForm();
}}
有什么resetForm可以做的？
当务之急是重置表格。这将清除错误和触摸，将 isSubmitting 设置为 false，将 isValidating 设置为 false，并使用当前 WrappedComponent 的props或作为参数传递的内容重新运行 mapPropsToValues。后者对于在 componentWillReceiveProps 中调用 resetForm 很有用。
如果使用useFormik钩子然后formik.resetForm()在 onClick 事件上使用，或者如果您使用的是<Formik>组件，则可以这样做：
onSubmit={(values, { setSubmitting, resetForm }) => {
// your code
resetForm();
}}
我不完全确定，但我认为您将不得不编写自己的重置功能，而无需带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钩子并希望在“重置”按钮单击时清除表单的人来说，这是实现这一目标的一种方法。
<button type="reset" onClick={ e => formik.resetForm()}> Reset</button>