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
Я не совсем уверен, но думаю, вам придется написать свою функцию сброса без кнопки с типом 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>
);
}
Я бы все равно выбрал первое решение, хотя лично.
Я обновил свой ответ возможным решением, если вы действительно хотите использовать onReset.
Большое спасибо за просмотр исходного кода, который выглядит как ограничение Formik. Я пойду с вашим первым решением :)
Здравствуйте @Aximili, вы можете использовать resetForm в onSubmit.
onSubmit = {(values, { resetForm }) => {
// do your stuff
resetForm();
}}
что resetForm может сделать?
В обязательном порядке сбросить форму. Это очистит ошибки и коснется, установит isSubmitting в false, isValidating в false и повторно запустит mapPropsToValues с текущими реквизитами WrappedComponent или тем, что передано в качестве аргумента. Последнее полезно для вызова resetForm внутри componentWillReceiveProps.
Я понимаю, что вопрос ОП был для Formik.
Тем не менее, для тех, кто использует useFormik хук и хочет очистить форму при нажатии кнопки «сброс», вот один из способов добиться этого.
<button type = "reset" onClick = { e => formik.resetForm()}> Reset</button>
Я пришел к этой статье в поисках этого ответа. Это было именно то, что мне было нужно, потому что React Hooks.
Если вы используете useFormik хук, используйте formik.resetForm() для события onClick или если вы используете компонент <Formik>, вы можете сделать это следующим образом:
onSubmit = {(values, { setSubmitting, resetForm }) => {
// your code
resetForm();
}}
зачем копируете ответы.
Моя проблема заключалась в том, что я не хотел использовать 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();
}
Спасибо, МэдСкон. Да, вы могли бы это сделать, но у Formik уже есть
onReset, поэтому я подумал, что должен быть способ сделать это там.