react彈出框問題

目標(biāo)：點擊某個按鈕彈出顯示詳細信息的彈出框。在出現(xiàn)彈出框的時候頁面禁止?jié)L動

我的實現(xiàn)方式是把遮罩層和彈出的內(nèi)容作為一個組件。通過點擊事件改變state值從而判斷彈出框是否被渲染。
如果被渲染。然后設(shè)置

body{
  overflow:hidden
}

但是在第一次點擊渲染出彈出層的時候頁面會自動跳到頂部。之后反復(fù)就不會出現(xiàn)這樣的問題。沒有沒大神告訴我原因是什么。本人第一次用react寫項目