reactjs - Formik 将表单重置为初始值

Question

我正在使用 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")
                      }}
                  />            

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

任何人都可以请协助我所缺少的。

Answer 1

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

您应该将其resetForm()用作函数调用

Answer 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 应该可以正常工作