按钮重置时 Formik 清除表单

Question

我有以下表单代码，重置按钮只会清除添加到现有默认值的任何附加文本：

const initialValues = {
    firstName,
    lastName,
    email: customerEmail,
    title: customerTitle,
    dob,
}

return (
    <Formik
        initialValues={initialValues}
        onSubmit={data => handleOnSubmit(data)}
    >
        {formik => (
            <Form className="w-full md:w-4/5 lg:w-3/5 mx-auto">
                <ThreeColumnFormFieldset>
                    <Field
                        id="title"
                        name="title"
                        label="Title"
                        component={Input}
                        validate={validateRequired}
                    />

                ...
                <ButtonsWrapper>
                    <Button
                        disabled={!(formik.isValid && formik.dirty)}
                        type="Submit"
                        isPrimary
                        text="update"
                    />

                    <Button
                        onClick={() => formik.resetForm()}
                        type="reset"
                        text="clear all"
                    />
                </ButtonsWrapper>
                ...

这应该清除表单输入值。

Answer 1

我认为重置为默认值是预期的行为。

您可以通过向 resetForm() 传递参数来清空所有字段

<Button
    onClick={() => formik.resetForm({
      values: {
       title: '',
      },
     type="reset"
     text="clear all"
/>

Check the docs here

按钮重置时 Formik 清除表单

Formik clear form on button reset

javascript

reactjs

formik