Formik 将表单重置为初始值答案

【问题标题】：Formik resetting form to initial valuesFormik 将表单重置为初始值
【发布时间】：2021-09-09 10:36:08
【问题描述】：

我正在使用 Formik 并在下面进行了以下设置，我希望能够在用户按下“取消”按钮时重置表单。返回表单时，所有表单值都应重置为initialValues，它们都是空值。

        <Formik
          enableReinitialize
          initialValues={{ 
            ...INITIAL_FORM_STATE
          }}
          validationSchema={ FORM_VALIDATION }
          onSubmit={handleSubmit}
        >
          {({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, resetForm }) => (

          <Form>
             .....

取消按钮我有以下代码：

                  <Button
                      text="Cancel"
                      startIcon={<UndoIcon />}
                      variant="contained"
                      color="default"
                      className={classes.buttons}                          
                      component={Link} 
                      to={'/home'}
                      onClick={() => { 
                          {resetForm}
                          setMenu("Home")
                      }}
                  />

在表单字段中输入一些文本并按下取消按钮后，该按钮将我引导回主页，然后我返回表单并注意到我的文本仍处于表单中的状态并且没有重置。

谁能帮我解决我的遗漏。

【问题讨论】：

标签： reactjs formik formik-material-ui

【解决方案1】：

              <Button
                  text="Cancel"
                  startIcon={<UndoIcon />}
                  variant="contained"
                  color="default"
                  className={classes.buttons}                          
                  component={Link} 
                  to={'/home'}
                  onClick={() => { 
                      resetForm()
                      setMenu("Home")
                  }}
              />

您应该使用resetForm() 作为函数调用

【讨论】：

我试过了，不幸的是这并没有解决我的问题。仍然没有重置。

【解决方案2】：

您只需将输入框的值设置为formik值：

<Formik
          enableReinitialize
          initialValues={{ 
            ...INITIAL_FORM_STATE
          }}
          validationSchema={ FORM_VALIDATION }
          onSubmit={handleSubmit}
        >
          {({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, resetForm }) => (
<input value={values.propertyName}/>
          <Form>

现在 resetForm 应该可以正常工作了

【讨论】：