Formik 的表单无法识别 Material UI 组件的文本字段值？答案

【问题标题】：Formik's forms don't recognize material UI component's text field value?Formik 的表单无法识别 Material UI 组件的文本字段值？
【发布时间】：2020-06-07 04:24:59
【问题描述】：

我使用 formik 和 Material 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.的沙盒

【问题讨论】：

标签： javascript reactjs material-ui formik formik-material-ui

【解决方案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"
  />

【讨论】：