如何在formik中禁用提交时的自动重置表单？答案

【问题标题】：How disable the auto reset form on submit in formik?如何在formik中禁用提交时的自动重置表单？
【发布时间】：2020-06-27 13:22:36
【问题描述】：

我有一个由 formik 控制的表单，当我填写所有字段并按下按钮提交时，函数 onSubmit 被调用并且我的表单重置了这个值。

有时我的数据不正确（例如重复的电子邮件），我需要保留这些数据。

我该怎么做？

这是我的代码：

    const schema = Yup.object().shape({
        login: Yup.string()
            .email('Email não possui formato válido')
            .required('Informe o email!'),
        password: Yup.string().required('Informe a senha!'),
    })

    const formik = useFormik({
        initialValues: {
          login: '', password: '', inactive: false
        },

        validationSchema: schema,
        onSubmit: values => {
            registerUser(values)
        }
    })

return (
    <form onSubmit={formik.handleSubmit} className={classes.form} noValidate>
        <Grid container spacing={3}>

            <Grid item xs={12}>
                <Typography className={classes.observation} component="h6">* Necessário preenchimento do cadastro geral para liberar permissão de telas</Typography>
            </Grid>

            <Grid item xs={5}>
                <TextField
                    value={formik.values.login}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    helperText={formik.touched.login ? formik.errors.login : ""}
                    error={formik.touched.login && Boolean(formik.errors.login)}
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    id="email"
                    label="E-mail"
                    name="login"
                    autoComplete="email"
                />
            </Grid>

            <Grid item xs={5}>
                <TextField
                    value={formik.values.password}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    helperText={formik.touched.password ? formik.errors.password : ""}
                    error={formik.touched.password && Boolean(formik.errors.password)}
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    type="password"
                    id="password"
                    label="Senha"
                    name="password"
                />
            </Grid>

            <Grid item xs={2}>
                <FormControlLabel
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    value={formik.values.inactive}
                    control={<Switch color="primary" />}
                    label="Inativo"
                    labelPlacement="top"
                />
            </Grid>

            <Grid item xs={3}>
                <Button fullWidth 
                    variant="contained" 
                    color="primary"
                    type="submit"
                >
                    Cadastrar
                </Button>
            </Grid>

        </Grid>
    </form>
);

【问题讨论】：

标签： reactjs formik

【解决方案1】：

您需要更新以下行：

    <form onSubmit={(e) => { e.preventDefault(); formik.handleSubmit(e)}} className={classes.form} noValidate>

【讨论】：

提交时仍在重置表单。
你能在 codePen 或任何在线编辑器上创建一个项目吗？

【解决方案2】：

使用formik中的Form，默认是提交时不重置：

import { Formik, Form } from "formik";

function DemoComp(){
  return(
     <Formik
        initialValues={{ fieldOneVal: "" }}
        onSubmit={async (formsData, {setSubmitting, resetForm}) => {
          setSubmitting(true)
          // async request
          // --> if wanted to reset on submit: resetForm();
          console.log(formsData)
          setSubmitting(false)
        }}
      >
        {({ values, isSubmitting, handleChange, handleBlur, handleSubmit }) => (
          <Form>
            <input
              type="text"
              name="fieldOneVal"
              value={values.fieldOneVal}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>    

  )
}

【讨论】：

【解决方案3】：

在我得到服务器的响应之前，我在重置表单时遇到了同样的问题。这个解决方案帮助了我。

import { Formik, Form } from "formik";

function DemoComp(){
const [formvalues,setFormvalues]= useState({
{ fieldOneVal: "" }
)
  return(
     <Formik
        initialValues={{ fieldOneVal: formvalues.fieldOneVal }}
        onSubmit={(values, { resetForm }) => {
          setFormvalues(({fieldOneVal:values.fieldOneval})
          // async request
           if sucess{
              reset the state to initial values}
           else{
              pop up modal display with errors}
          
        }}
      >
        {({ values, isSubmitting, handleChange, handleBlur, handleSubmit }) => (
          <Form>
            <input
              type="text"
              name="fieldOneVal"
              value={values.fieldOneVal}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>    

  )
}

【讨论】：

【解决方案4】：

您需要将函数定义为异步，并且由于您的代码中未提及异步响应处理，因此很难给出准确的解决方案

<Formik
        initialValues={{ fieldOneVal: formvalues.fieldOneVal }}
        onSubmit={async (values, { resetForm }) => {
         // setFormvalues(({fieldOneVal:values.fieldOneval}) don't know why you're manipulating state 
          const resp=await someAsyncFunc()

           if (resp){
              reset the state to initial values}
           else{
              pop up modal display with errors}
          
        }}
      >

【讨论】：