Formik 的 forms 不識別材質 UI 組件的文本字段值？

Question

我使用 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" />

我在這里創建了一個代碼沙箱。

Answer 1

要將 formik 與材質 ui 正確掛鈎，請使用render prop（而不是component ）並獲取您獲得的 formik field並將其傳遞給材質 ui Textfield

像這樣

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