滚动到错误组件使用formikReact原生

mtb9vblg 于 2023-03-24 发布在 React

关注(0)|答案(1)|浏览(131)

我不知道如何在我的应用程序中使用formik创建一个可以滚动到错误的组件，因为我的窗体很大，我想滚动到错误输入，使应用程序更好。

import React, { useEffect } from 'react';

import { useFormikContext } from 'formik';

const ScrollToError = () => {
  const formik = useFormikContext();
  const submitting = formik?.isSubmitting;

  useEffect(() => {
    if (formik?.errors && submitting) {
      const keys = Object.keys(formik.errors);
      const firstErrorKey = keys[0];
      const firstError = formik?.getFieldProps(firstErrorKey)?.ref?.current;
      if (firstError) {
        firstError.focus();
      }
    }
  }, [formik, submitting]);
  return null;
};

export default ScrollToError;

react-native

来源：https://stackoverflow.com/questions/75800963/scroll-to-error-component-using-formik-react-native

1条答案

按热度按时间

bf1o4zei1#

您需要存储每个输入的y位置和对视图的引用。

const refScrollView = useRef<ScrollView>(null);
  const [fieldsPositions, setFieldsPositions] = useState({
    nameField: 0,
    emailField: 0,
    xyzField: 0,
  });

要获取y位置，可以使用 onLayout 属性。
电子邮件字段示例：

onLayout={(event: LayoutChangeEvent) =>
  setFieldsPositions({
    nameField: fieldsPositions.nameField,
    emailField: event.nativeEvent?.layout?.y, // <-
    xyzField: fieldsPositions.xyzField,
  })
}

当你得到一个错误（你的 if（firstError））时，你可以向下滚动到该字段：

refScrollView.current.scrollTo({
    x: 0,
    y: fieldsPositions.email,
    animated: true,
});

赞(0）回复(0）举报 2023-03-24

我来回答

滚动到错误组件使用formikReact原生

1条答案

相关问题

热门标签

最新问答