Formik 与 MaterialUI 的 TextField 值更新问题

Question

我有一个 React 功能组件，我使用 Formik 进行表单管理，使用 MaterialUI V5.10 进行样式设置。在我的 Formik 表单中，我使用了几个 TextField 元素和一个 Canvas 元素。

我有以下两个问题...

尽管使用初始值初始化 Formik 表单元素值，但没有一个 TextField 显示这些值。我能看到它们的唯一方法是使用文本字段的“defaultValue”属性。请参见下面的代码片段

const initialValues = {
    toEmail01: "<user>@xyz.co",
  };

return (
    <div>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
        //enableReinitialize={false}
      >
        {({
          submitForm,
          handleBlur,
          handleChange,
          isSubmitting,
          isValid,
          dirty,
          touched,
          values,
          errors,
        }) => (
          <Form>
            <div>
                 <Grid item xs={2}>
                        <Item
                          sx={{
                            width: "50em",
                            height: "20em",
                            variant: "outlined",
                            border: "solid",
                            overflow: "scroll",
                          }}
                        >
                          <Typography variant="">To</Typography>
                          <Box
                            component="form"
                            sx={{
                              "& .MuiTextField-root": { m: 0, width: "75ch" },
                            }}
                            noValidate
                            autoComplete="off"
                          >
                            <div>
                              <TextField
                                id="toEmail01"
                                name="toEmail01"
                                //defaultValue={initialValues["toEmail01"]}
                                onChange={handleChange}
                                onBlur={handleBlur}
                                helperText={
                                  touched.toEmail01 ? errors.toEmail01 : ""
                                }
                                error={
                                  touched.toEmail01 && Boolean(errors.toEmail01)
                                }
                                margin="dense"
                                variant="standard"
                                fullWidth
                              />
                            </div>
                           
                          </Box>
                        </Item>
                      </Grid>
            </div>
          </Form>
         )}
      </Formik>

我还面临另一个问题，在我的 formik 表单上，我有一个 Canvas 元素需要动态更新用户输入的文本，我使用 useState() 挂钩更新这个值（来自级别状态管理）。我注意到的是，每次更新文本元素时，整个功能组件都会重新呈现，并且其他不相关的 TextInputs 的值也会刷新。不确定如何避免这种情况。我用 Formik 尝试了 enableReinitialize={false} 和 enableReinitialize 但它没有帮助。

Answer 1

如果您在使用 Formik 时遇到更新 MaterialUI TextField 值的问题，您可以尝试以下方法：

使用 Formik 的 useFormikContext 钩子来访问值和 handleChange 道具：

    import { useFormikContext } from 'formik';
import { TextField } from '@material-ui/core';

function MyForm() {
  const { values, handleChange } = useFormikContext();

  return (
    <TextField
      name="myField"
      value={values.myField}
      onChange={handleChange}
      label="My Field"
    />
  );
}

确保 TextField 的名称属性与 Formik 值对象中的字段名称相匹配。

通过使用 useFormikContext 并将 handleChange 函数传递给 TextField 的 onChange 属性，您应该能够与 Formik 的值同步更新 TextField 的值。