Formik的表单无法识别材料UI组件的文本字段值？

Question

我使用formik和材料UI构建了一个简单的联系页面。一切正常，除了我使用Material UI组件而不是常规输入标签时。程序似乎无法读取Material UI TextField组件内部的值。

此作品：

                     <Field 
                        name="name" 
                        id="outlined-textarea"
                            label="First Name"
                            variant="outlined"
                            margin="dense"
                            component='input'
                            />
                    <ErrorMessage name="name" className="errorMsg" component="p" />

这不起作用：

                      <Field
                        name="lastName"
                        id="outlined-textarea"
                        label="Last Name"
                        component={TextField}
                        variant="outlined"
                        margin="dense"
                    />
         <ErrorMessage name="lastName" className="errorMsg" component="p" />

我创建了代码为here.的沙箱

Answer 1

要正确地将formik与材料ui挂钩，请使用render道具（而不是component）并抓住获得的formik field并将其向下传递到材料ui Textfield

喜欢此

<Field
    name="lastName"
    id="outlined-textarea"
    label="Last Name"
    render={({ field }) => <TextField {...field} />}
    variant="outlined"
    margin="dense"
  />