我有一个包含很多表单字段的应用程序。我想要一种可以避免重新渲染的方法。我正在使用 Formik 来管理表单。
我正在使用 FormikuseField来访问子组件中的 Formik 表单值,因为React.memo仅进行浅层比较。我想为 memo 方法编写一个自定义回调
function MainForm3() {
const initialValues = { txtArea: "" };
return (
<Formik initialValues={initialValues}>
{(formik) => {
return (
<>
<TextArea
name={"txtArea"}
rows={3}
id={"txtArea"}
label={"txtArea"}
/>
</>
);
}}
</Formik>
);
}
function TextArea(props: any) {
const [field] = useField(props);
return <TextField {...field} />;
}
React.memo(TextArea, (prev, next) => {
//how do i get access to the formik to perform a comparison
});
Run Code Online (Sandbox Code Playgroud)
由于上一个值和下一个值只能访问传递的直接属性,因此我无法比较备注函数中的 Formik 字段值。 …