Formik with MaterialUI 的 TextField 值更新问题

Question

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

我有以下两个问题…

尽管用初始值初始化Formik表单元素的值，但是没有一个TextField显示这些值。我能看到他们的唯一方法是，如果我使用'defaultValue'属性的Textfield..参见下面的代码片段

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的值也会刷新。不知道如何避免这种情况。我尝试了enableReinitialize={false}和enableReinitialize与Formik，但它没有帮助。

Answer 1

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

使用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的名称prop与Formik values对象中的字段名称匹配。

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