如何在提交后或使用 formik 单击取消按钮后重置表单答案

【问题标题】：How to reset the form after submit or after clicking on cancel button using formik如何在提交后或使用 formik 单击取消按钮后重置表单
【发布时间】：2020-12-11 19:31:18
【问题描述】：

const TextForm: React.FunctionComponent<Props> = (props) => { 

const formError = yup.object({
    name: yup.string().required("Required"),
  });
      const formValidation = (fieldName) => {
        return {
          invalid: !!form.errors[fieldName] && form.touched[fieldName],
          invalidText: form.errors[fieldName],
          onBlur: form.handleBlur,
        };
      };  
 const form = useFormik({
        initialValues: {
          name,
          id,
        },
        formValidation
        formError,
        validateOnChange: true,
        validateOnMount: true,
        initialTouched: {},
      });
  
    return(
    <React.Fragment>
    <form>
     <TextInput
                        id="text-input-2"
                        {...validation("name")}
                        type="text"
                        name = "name"
                        onChange={(event) => {
                          setName(event.target.value);
                          form.handleChange(event);
                        }}
                      />
    <TextInput
                        id="text-input-2"
                        {...validation("id")}
                        type="text"
                        name = "id"
                        onChange={(event) => {
                          setId(event.target.value);
                        }}
                      />
    <Button>Clear</Button>
    <Button>Submit</Button>
    </form>
    </React.Fragment>
    ) 
    }

我的表单中的验证工作正常。但是如果用户没有输入任何字段，它会带有必需的警告。我正在尝试在清除按钮单击时清除/重置表单，但找不到任何可能的解决方案。谁能帮我解决这个问题。

【问题讨论】：

对于清除按钮，您可以尝试指定按钮类型type="reset"。如果没有为按钮指定类型属性，则type="submit" 是默认类型。
我尝试过 type = "rest 但它不会重置表单。重置表单意味着我想要新表单并清除其所有状态。我不确定如何使用 onReset 或 resetForm 使用 formik
您的 sn-p 没有指定任何按钮类型。请将 sn-p 更新为有问题的实际代码，否则我们只是猜测问题可能是什么。
正如@DrewReese 提到的尝试它将起作用。欲了解更多信息stackoverflow.com/questions/55583815/…。

标签： javascript reactjs typescript formik

【解决方案1】：

快速搜索 Formik 文档。

Formik onSubmit 和 onReset 作为第二个参数传递 formikBag，其中包含 resetForm 操作。 resetForm 回调可以从这个formikBag 对象中解构并在你的回调中使用。

onSubmit onReset

const form = useFormik({
  initialValues: {
    name,
    id,
  },
  formValidation
  formError,
  validateOnChange: true,
  validateOnMount: true,
  initialTouched: {},
  onSubmit: (values, { resetForm }) => {
    // submission logic
    resetForm();
  },
  onReset: (values, { resetForm }) => resetForm(),
});

您还需要确保表单按钮具有正确的按钮类型，以便表单在单击时采取正确的操作。

【讨论】：

谢谢。这真的很有帮助，但是有没有办法在不将按钮类型设置为重置的情况下重置表单？我在模态中有我的表格。而且我无法访问模式附带的按钮。
@Singh 嗯，这就是 form 和 button 元素在语义 HTML 中的工作方式（出于明显的可访问性原因）。在您的 sn-p 中，按钮是表单的一部分，您应该对它们进行一些控制（假设 Button 以合理的方式设计/实现）。
@Singh 如果您能够通过在模态代码中如何使用表单来更新您的问题，我们可能会想出一个解决方案。