如何在聊天应用程序中点击发送按钮滚动消息到底部?

Question

在React项目中，我创建了Chat Section。所有的设计和功能都完成了，除了发送消息时它不能自动向下滚动。最好的解决方案是什么?

下面是参考

的代码

const MessageApp = () => {
const [textValue, setTextValue] = useState("");
const [textMessages, setTextMessages] = useState([]);
const [newTextValue, setNewTextValue] = useState("");
const [showSenderMessage, setShowSenderMessage] = useState(false);
const [showRecieverMessage, setShowRecieverMessage] = useState(false);
useEffect(() => {
const newData = localStorage.getItem("messages");
setTextMessages(newData);
}, []);
const sendMessage = (e) => {
e.preventDefault();
setShowSenderMessage(true);
if (textValue != "") {
setTextMessages([...textMessages, textValue]);
localStorage.setItem("messages", textMessages);
setTextValue("");
} else {
return;
}
};
return (
<>
{showSenderMessage &&
textMessages.map((text) => (
<div
className="bubble-sender"
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "flex-start",
width: "80%"
}}
>
<span style={{ width: "20%" }}>
<img
alt="blank profile"
src="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
style={{
height: "50px",
width: "50px",
border: "2px solid black",
borderRadius: "50%"
}}
/>
</span>
<span style={{ width: "80%" }}>
{text}
<br />
<span
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "flex-end"
}}
>
<small style={{ color: "grey", float: "right" }}>
11:23 AM
</small>
</span>
</span>
</div>
))}
<span>
<form
style={{
position: "fixed",
bottom: "0",
marginBottom: "80px",
width: "100%"
}}
>
<div className="col-lg-10 mb-3">
<div className="input-group mycustom">
<input
value={textValue}
type="text"
required
placeholder="Send Message"
maxLength="30"
onChange={(e) => setTextValue(e.target.value)}
/>
<div className="input-group-prepend">
<button
type="submit"
style={{
color: "white",
display: "flex",
flexWrap: "wrap",
justifyContent: "space-evenly"
}}
onClick={sendMessage}
>
Send Message
</button>
</div>
</div>
</div>
</form>
</span>
</>
);
};
export default MessageApp;

下面是codesandbox链接:https://codesandbox.io/s/upbeat-montalcini-bpdsp

Answer 1

try this:

import React, { useState, useEffect, useRef } from "react";
import "./MessageApp.css";
const MessageApp = () => {
const [textValue, setTextValue] = useState("");
const [textMessages, setTextMessages] = useState([]);
const [newTextValue, setNewTextValue] = useState("");
const [showSenderMessage, setShowSenderMessage] = useState(false);
const [showRecieverMessage, setShowRecieverMessage] = useState(false);
const messagesEndRef = useRef(null);
const scrollToBottom = () => {
messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
};
useEffect(scrollToBottom, [textMessages]);
useEffect(() => {
const newData = localStorage.getItem("messages");
setTextMessages(newData.split(","));
}, []);
const sendMessage = (e) => {
e.preventDefault();
setShowSenderMessage(true);
if (textValue != "") {
// const newTextValueHere = textValue;
// setNewTextValue(newTextValueHere);
// setTextValue("");
setTextMessages(preVal=>[...preVal,textValue]);
localStorage.setItem("messages", textMessages);
setTextValue("");
} else {
return;
}
};
return (
<>
{showSenderMessage &&
textMessages.map((text) => (
<div
className="bubble-sender"
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "flex-start",
width: "80%"
}}
>
<span style={{ width: "20%" }}>
<img
alt="blank profile"
src="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
style={{
height: "50px",
width: "50px",
border: "2px solid black",
borderRadius: "50%"
}}
/>
</span>
<span style={{ width: "80%" }}>
{text}
<br />
<span
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "flex-end"
}}
>
<small style={{ color: "grey", float: "right" }}>
11:23 AM
</small>
</span>
</span>
</div>
))}
<span>
<form
style={{
position: "fixed",
bottom: "0",
marginBottom: "80px",
width: "100%"
}}
>
<div className="col-lg-10 mb-3">
<div className="input-group mycustom">
<input
value={textValue}
type="text"
required
placeholder="Send Message"
maxLength="30"
onChange={(e) => setTextValue(e.target.value)}
/>
<div className="input-group-prepend">
<button
type="submit"
style={{
color: "white",
display: "flex",
flexWrap: "wrap",
justifyContent: "space-evenly"
}}
onClick={sendMessage}
>
Send Message
</button>
</div>
</div>
</div>
</form>
</span>

<div ref={messagesEndRef} />
</>
);
};
export default MessageApp;

这里是基于你的沙盒(我只是删除注释代码)。
我已经修复了你的setTextMessages上的一个bug，其中应用程序返回一个迭代器错误。
你需要做一些样式调整，因为现在新消息是"hide">

更新你的const newData是typeOf字符串，所以你需要在你的setTexMessage()中分割它，像这样:

useEffect(() => {
const newData = localStorage.getItem("messages");
setTextMessages(newData.split(","));
}, []);