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"
/>

在此處查看文檔