小编onl*_*ava的帖子

使用 Formik 反应备忘录

我有一个包含很多表单字段的应用程序。我想要一种可以避免重新渲染的方法。我正在使用 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 字段值。 …

javascript performance reactjs formik

5
推荐指数
1
解决办法
5452
查看次数

标签 统计

formik ×1

javascript ×1

performance ×1

reactjs ×1