我是新来的反应者,我希望div在开始溢出时向上滚动,并且我正在尝试以正确的方式进行反应,但似乎无法弄清楚。

我的render方法中有以下内容:

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;
},


但这行不通

最佳答案

为了访问react组件中的DOM节点,您可以执行以下操作:

说你有一个<div ref = "hello">Hello World.</div>

您可以通过以下方式访问此DOM节点:this.refs.hello

您唯一需要注意的是这仅适用于HTML元素,而不适用于React元素。对于React元素,您需要使用this.getDOMNode(this)并进行遍历。

10-07 19:02
查看更多