如何使用Reactjs正确实现div消息的scrollHeight或scrollTop_Reactjs

如何使用Reactjs正确实现div消息的scrollHeight或scrollTop

reactjs

如何使用Reactjs正确实现div消息的scrollHeight或scrollTop,reactjs,Reactjs,我正在尝试在Reactjs中实现聊天消息。聊天信息被正确附加，并且工作正常这是我的问题：聊天信息到达底部时不会向上滚动我正在考虑在消息到达底部时实现类似chat div auto scrollup的功能 scrollToBottom() { chat_messages.scrollTop = chat_messages.scrollHeight; } 有什么解决办法吗代码如下： <!DOCTYPE html> <html> <head> &

我正在尝试在Reactjs中实现聊天消息。聊天信息被正确附加，并且工作正常

这是我的问题：聊天信息到达底部时不会向上滚动

我正在考虑在消息到达底部时实现类似chat div auto scrollup的功能

scrollToBottom() {
  chat_messages.scrollTop = chat_messages.scrollHeight;
}

有什么解决办法吗

代码如下：

<!DOCTYPE html>
<html>
   <head>

<style>

.chat_container{

background:blue;
height:40%;
max-height:40%;

width: 60%;
max-width: 60%;
 overflow-y: auto;

}


.chat_message{

background:green;
color:white;
padding:10px;
border:none;

}

.myFooter{
bottom:0px;
position:fixed;
background:red;
height:10%;
max-height:10%;

width: 60%;
max-width: 60%;


}
</style>
   </head>
   <body>
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>

<div id="app"></div>

<script type="text/babel">


class Application extends React.Component {

//function Application() {
  constructor(props) {
    super(props);

const sender = 'John';

    this.state = {
message: '',
value: '',
sname: sender,
date: new Date(),
messages: []
};

this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

handleChange(event) {
    this.setState({message: event.target.value});
  }

  handleSubmit(event) {
   // alert('A name was submitted: ' + this.state.message);
    event.preventDefault();

const data = {'message': this.state.message}
 this.setState({
            messages : this.state.messages.concat([data])
        });
//$(".chat_container").animate({ scrollTop: 20000000 }, "slow");
 this.scrollToBottom();

  }



scrollToBottom() {
  chat_messages.scrollTop = chat_messages.scrollHeight;
}

componentDidMount() {
// fetch content axio or ajax
  }


  render() {

    return (
      <div>
        <div className="chat_container">


  <h2>Welcome to Chat: Time is: {this.state.date.toLocaleTimeString()}</h2>

      

 {this.state.messages.map((m, e) => (


              <div key={e}>


               
<div className="chat_message">chat: {m.message} ---{this.state.date.toLocaleTimeString()}</div> 

              </div>
            ))}

       
        </div>

<div className="myFooter">
 <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.message} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
</div>


      </div>
    );
  }
}


ReactDOM.render(<Application />, document.getElementById('app'));
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


   </body>
</html>


.chat_容器{
背景：蓝色；
身高：40%；
最大高度：40%；
宽度：60%；
最大宽度：60%；
溢出y：自动；
}
.聊天室信息{
背景：绿色；
颜色：白色；
填充：10px；
边界：无；
}
.myFooter{
底部：0px；
位置：固定；
背景：红色；
身高：10%；
最大高度：10%；
宽度：60%；
最大宽度：60%；
}
类应用程序扩展了React.Component{
//函数应用程序（）{
建造师（道具）{
超级（道具）；
const sender='John'；
此.state={
消息：“”，
值：“”，
斯奈姆：发送者，
日期：新日期（），
信息：[]
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{message:event.target.value}）；
}
handleSubmit（事件）{
//警报（“已提交名称：”+this.state.message）；
event.preventDefault（）；
常量数据={'message'：this.state.message}
这是我的国家({
messages:this.state.messages.concat（[数据]）
});
//$（“.chat_container”）.animate（{scrollTop:20000000}，“slow”）；
这个.scrollToBottom（）；
}
scrollToBottom（）{
chat_messages.scrollTop=chat_messages.scrollHeight；
}
componentDidMount（）{
//从axio或ajax获取内容
}
render（）{
返回(
欢迎来到聊天室：时间是：{this.state.date.toLocaleTimeString（）}
{this.state.messages.map（（m，e）=>(
聊天：{m.message}--{this.state.date.toLocaleTimeString（）}
))}
姓名：
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

我得到了您的示例：

bottomRef.current.scrollIntoView({ behavior: "smooth" });

下面是完整的代码；我很荣幸地将其转换为一个功能性的React组件，并使用了useRef钩子（消息状态更新时会出现滚动）：

很好的方法。我所有的代码都已经在课堂上了。我会模仿你的函数方法，看看它是如何进行的。谢谢你的努力

import React, { useState, useRef, useEffect } from "react";
import "./styles.css";

export default function App(props) {
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);

  const currentDate = new Date();
  const bottomRef = useRef();

  useEffect(() => {
    // fetch content axio or ajax
  }, []);

  useEffect(() => {
    bottomRef.current.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  function handleChange(event) {
    setMessage(event.target.value);
  }

  function handleSubmit(event) {
    // alert('A name was submitted: ' + this.state.message);
    event.preventDefault();
    const newMessages = messages;
    const data = { message: message, date: new Date() };
    setMessages(newMessages.concat([data]));
  }

  return (
    <React.Fragment>
      <h2>Welcome to Chat: Time is: {currentDate.toLocaleTimeString()}</h2>

      <div className="chat_container">
        {messages.map((m, e) => (
          <div key={e}>
            <div className="chat_message">
              chat: {m.message} ---{m.date.toLocaleTimeString()}
            </div>
          </div>
        ))}

        <div id="bottom-reference" ref={bottomRef} />
      </div>

      <div className="myFooter">
        <form onSubmit={handleSubmit}>
          <label>
            Name:
            <input type="text" value={message} onChange={handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </div>
    </React.Fragment>
  );
}

.chat_container {
  height: 200px;
  overflow: scroll;
}