Formik initialValues 和 onSubmit 问题

Question

我的 Formik 表格有几个问题。

如果我在 <TextField> 上使用 defaultValue={location.fname} 我可以在字段中输入，但在提交时，新输入的值不会出现在警报中。
如果我在 <TextField> 上使用 value={location.fname}，我无法在字段中输入。

我做错了什么？我希望能够在字段中键入内容以更新值并在提交时获得新值。

let formik = useFormik({
    initialValues: {
        fname: person.fname,
        lname: person.lname,
        address: person.address,
        city: person.city,
    },
    enableReinitialize:true,
    validateOnChange: false,
    validateOnBlur: false,
    validationSchema: validationSchema,
    onSubmit: values => {
        alert(JSON.stringify(values, null, 2));
    },
});
...

<TextField
    id="fname"
    name="fname"
    variant="outlined"
    defaultValue={location.fname}
    onChange={formik.setFieldValue}
    error={formik.touched.fname && Boolean(formik.errors.fname)}
    helperText={formik.touched.fname && formik.errors.fname} />

Answer 1

将默认值从 location.fname 更改为 formik.values.fname，因为您已经使用 initialValues 将值传递给 formik。也把onChange从formik.setFieldValue改成formik.handleChange，让formik通过输入名称处理表单状态，最后加上onBlur={formik.handleBlur}，这样formik就可以知道你的输入框什么时候被触摸了.

Formik initialValues 和 onSubmit 问题

Formik initialValues and onSubmit issues

reactjs

formik