Reactテキストエリアの一番下までスクロール

Question

テキストエリアにテキストを差し向けて、最後までスクロールして最新のビューを保持します。しかし、これを実行すると、ブラウザがクラッシュしたり、メモリが不足しているように見えます。誰もこのコードを最適化するのに役立つことができます

//Appending text and calling scroll function 
this.setState({ transcriptText: this.state.transcriptText + resp.log }) 
this.scrollToBottom(); 

//Textarea 
<TextArea 
    ref={textLog => this.textLog = textLog} 
    autosize={{ minRows: 10, maxRows: 15 }} 
    value={this.state.transcriptText} 
> 
</TextArea> 

//Scrolling 
scrollToBottom =() => { 
    const textLogContainer = ReactDOM.findDOMNode(this.textLog); 
    if(textLogContainer){ 
     textLogContainer.scrollTop = textLogContainer.scrollHeight; 
    } 
}; 

全

componentDidMount() { 
    const socket = io.connect(process.env.REACT_APP_API_URL, { transports: ['websocket'] }); 
    socket.emit('onboarding', { id: uploadId }); 
    socket.on('transcript_log', function (resp) { 
     this.setState({ transcriptText: this.state.transcriptText + resp.log }) 
     this.scrollToBottom(); 
    }.bind(this)); 
} 

あなただけrefがnullであるかどうかを確認してからscrollTopを変更するためにそれを変更、あなたが参照を持っているときReactDOM.findDOMNodeを行う必要はありませんおかげ

Answer 1

。 `this.textLog`が存在するが、マウントそれは常にコンポーネントに設定されているので、不要と思われるかどうかをチェックすると間違ってこの

scrollToBottom =() => { 
    if(this.textLog){ 
     this.textLog.scrollTop = this.textLog.scrollHeight; 
    } 
};