Question

我有新的反应，我想要一个div在它开始溢出时向上滚动，我正在尝试以正确的方式做出反应，但似乎无法弄明白。

我的渲染方法中有以下内容：

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

但那不会起作用

Answer 1

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

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

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

你唯一需要注意的是这只适用于HTML元素，而不是React元素。对于React元素，您需要使用this.getDOMNode(this)并完成它。

从Reactjs中进行div滚动

1 个答案: