javascript - 按钮重置时 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