Formik 清除按钮重置表单答案

【问题标题】：Formik clear form on button resetFormik 清除按钮重置表单
【发布时间】：2020-11-30 15:54:22
【问题描述】：

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

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>
                ...

这应该清除表单输入值。

【问题讨论】：

标签： javascript reactjs formik

【解决方案1】：

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

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

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

Check the docs here

【讨论】：