場景描述：

點選提交按鈕，對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;
    }
  });
}