讓div從Reactjs內滾動

我是新來的反應，我想要一個div向上滾動，因爲它開始溢出，我試圖用正確的方式做出反應，但似乎無法形象出來。讓div從Reactjs內滾動

我在我的渲染方法如下：

render:function(){ 

    return (
     <div className="main"> 
     <div className="title">talkin folk</div> 
     <div className="chatBox"> 
      <div className="chatRooms"> 
      <p className="large">rooms</p> 
      {this.arrayOfRooms} 
      </ div> 
      <div className="typingBox"> 
      <div ref='dialog' key='dialog' className="dialog"> // div to scroll 
       {this.arrayOfMsgToRender} 
      </div> 
      <div className="userType"> 
       <input 
       type="text" 
       placeholder="You:" 
       label="email" 
       value={this.state.msg} 
       onChange={this.handleInput} 
       /> 
      <input id="doneButton" type="submit" value="send" onClick={this.handleSend} /> 
      </div> 
      </ div> 
     </ div> 
     </ div> 
    ); 
    }

在上面的代碼，它是div對話，我想有它開始溢出自動向上滾動。

我試着這樣做：

componentDidUpdate: function() { 
    var node = this.getDOMNode('dialog'); 
    node.scrollTop = node.scrollHeight; 
},

但是，這不會工作

來源

2016-04-10 Daver Muzaffar

你試過this.refs.dialog嗎？因爲'dialog'是一個div而不是一個反應的自定義元素，所以你不需要使用this.getDOMNode。 [this]（http://jamesknelson.com/react-js-by-example-interacting-with-the-dom/）文章可能有所幫助。 – fzxt

嗨fzxt，你在哪裏this.refs.dialog正確工作，你可以使用它作爲下面的答案，我會接受它。謝謝你一堆 –

當然。我會寫一個答案:) – fzxt

爲了一個反應組件內訪問DOM節點，你可以做這樣的事情：

說您有一個<div ref = "hello">Hello World.</div>

您可以通過以下方式訪問此DOM節點：this.refs.hello。

唯一需要注意的是這隻適用於HTML元素，而不適用於React元素。對於React元素，您需要使用this.getDOMNode(this)，並完成它。

來源

2016-04-11 05:23:41 fzxt

完美的答案，再次感謝 –

讓div從Reactjs內滾動

回答

相關問題