validateFieldsAndScroll() 验证时自定义滚动位置

前言

最近刚开始上手使用react，踩坑无数，准备好好地把踩过的坑记录下来，整理成为学习笔记。

在使用 react 中的 From 组件时，通常会使用 getFieldDecorator 与 validateFieldsAndScroll，分别进行 数据的双向绑定 与 校验。

validateFieldsAndScroll

validateFieldsAndScroll() 是校验并获取一组输入域的值与 Error，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围。

我遇到的坑是，顶部有一个绝对定位的 bar ，导致滚动的时候，校验不通过的 input 框被挡住了，需要设置滚动的位移。

validateFieldsAndScroll（['field1', 'field2'], options, (errors, values) => { }）

validateFieldsAndScroll() 可以填入三个参数，第一个参数是需要验证的字段名称，第二个参数是选项，第三个参数是回调。

 设置滚动的位移，就是设置传入 options 参数，

options参数说明

其中，scroll 使用的是 dom-scroll-into-view， 

srcoll参数说明

我的问题是由于，滚动时 input 被顶部bar挡住了，所以可以设置top位移解决问题。

validateFieldsAndScroll(

    ['field1', 'field2'],    

   { 

        scroll : { offsetTop : 80 }

    },

     (errors, values) => { }

)