2017-10-11 33 views
0

我在做我的第一個反應過來+終極版應用程序,我有一個問題。我有一個呈現輸入字段的組件,並且,由於某些內容被添加到它上面,我需要它來scrollIntoVIew。我的組件是否需要強制更新爲scrollIntoView?

所以,我剛添加的scrollIntoView在組件componentDidUpdate()的生命週期方法:

componentDidUpdate() { 
    console.log("scroll"); 
    this.refs.input.scrollIntoView(); 
} 

唯一的問題是,這部分不會重新渲染每次(在它沒有什麼變化),所以scrollIntoVIew被稱爲只有一次。

我可能會迫使更新組件,但是這是不是真的很好的做法是不是?在這種情況下我能做些什麼?

+0

嘗試強制迴流與例如'this.refs.offsetTop'。 https://gist.github.com/paulirish/5d52fb081b3570c81e3a –

+0

@ Theo.T你能帶着幾分更多的細節解釋您的解決方案,我有點失去了 –

+0

啊,對不起,我誤解你的問題。但是,它是什麼意思來觸發scrollInToView?屬性更改,用戶事件? –

回答

0

您可以調用setState並每次添加內容以重新呈現組件時更新組件狀態中的某個對象,並且將調用componentDidUpdate
你也可以使用第二個參數(回調),以setState,但陣營文檔說以下有關的setState秒參數:

第二個參數是將 執行一次的setState是一個可選的回調函數完成並且組件被重新渲染。 一般來說,我們建議使用componentDidUpdate(),用於這種邏輯 代替。

+0

當然是的,但我要尋找一個更清潔的方式來做到這一點 –

+1

在這種情況下,而不是使用'componentDidUpdate'它可能會更好使用'setState'回調(第二個參數)要調用的方法。 –

+0

雖然不推薦。看到我更新的答案https://github.com/facebook/react/issues/6320 – Dane

相關問題