antd表单submit时提交后自动跳到出错位置

本文链接：https://blog.csdn.net/m0_56542349/article/details/132447623

1. 先在表单组件配置onFinishFailed方法

onFinishFailed={(errInfo) => {
  console.log("🚀 ~ file: index.tsx ~ line 474 ~ errInfo", errInfo)
  let fields: string = 'none';
  const { errorFields } = errInfo;
  fields = errorFields[0]['name'][0] as string;
  scrollToError(fields);
}}

2. 再创建scrollToError方法

  // 跳转到表单元素第一个出错的地方
  const scrollToError = (fields: any) => {
    const labels = document.querySelectorAll('label');
    const arr = [];
    // 获取所有有label的for
    for (let i = 0; i < labels.length; i++) {
      if (labels[i].getAttributeNode('for')) {
        const label = labels[i]?.getAttributeNode('for')?.value;
        arr.push(label);
      }
    }
    // 找到错误的那个label
    const errLabel = arr.filter((label) => {
      return label === fields;
    });
    // 找到错误label的DOM元素
    let errLabelDom;
    for (let i = 0; i < labels.length; i++) {
      if (labels[i]?.getAttributeNode('for')?.value === errLabel[0]) {
        errLabelDom = labels[i];
      }
      errLabelDom?.scrollIntoView(true);
      // 微信内置浏览器取scrollTop的时候要取 document.body.scrollTop
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      window.scrollTo(0, (scrollTop -= 118));
    }
  };