react+ant.design Form表单校验失败自动滚动到第一个校验不通过的表单位置

1. 一定要在Form标签上添加scrollToFirstError属性，触发要使用Button上面的htmlType="submit"方可。注意：Button要在Form标签内部包裹

缺点：不一定能准确的滑动到第一个校验不通过的Form表单
优点：使用方便，代码简洁

2.使用Form提供的校验不通过的事件来处理

 {
    // 核心代码
    const errorList = (document as any).querySelectorAll(".ant-form-item-has-error");
    // 由于校验失败ant会自动给失败表单项添加类名，直接获取即可
    errorList[0].scrollIntoView({
      block: "center",
      behavior: "smooth",
    });
  }}
>
  
    
      
        
      
    
    
      
        
      
    
  
  // 这个时候不一定需要把Button放到Form标签内部也不一定需要使用htmlType属性
  

缺点：需要获取DOM 代码量增多
优点：能够很完美的实现需求同时弥补方案一的短板

总结：如果方案一能满足您的需求建议使用方案一如果不行再使用方案二，首选方案一