场景描述：

点击提交按钮，对form表单页面信息进行校验，如果校验到某个输入的值的格式不正确，则使其所在表单要滑动到页面的最顶部。

解决方案关键词：

• ref, 获取到真实的DOM节点

• offsetTop, 元素距离页面顶部的距离

• scrollTop, 滚动条滚动的距离

具体实现步骤：

这个例子的数据保存是借助mobx的store写的，主要看的是思路啦！

<div>
{ ticketFormList.map((item,index) => {
  // 所有form表单div
  return <div className="tricket-form-container" key={index}>

    { item.forms.map((form,id)=>{
    	// 每个form表单div
        return <div key={id} ref={ (dom) => {
          if (dom != null) { 
            // 1. 得到真实的DOM节点，将每个节点距离顶部的距离offsetTop保存起来
            this.props.peopleInfoStore.saveFormPosition(item.id,form.formId,dom.offsetTop) 
          }
        }}>
       	  {/*每一个field*/}
          <TicketField form={form} forms={item} />
        </div>
      })}
    
  </div> })}
</div>

peopleInfoStore文件：

/*
* this.formPositionList 存储元素的offsetTop值的集合
*/
@action findErrorForm = (id, formId) => {
  this.formPositionList.forEach(item=>{
    if(item.id === id && item.formId === formId){
      // 2. 找到错误所在的元素相对应的offsetTop值，设置页面的scrollTop
      document.documentElement.scrollTop = item.offsetTop;
    }
  });
}