javascript - ReactJs如何在点击或提交时滚动到div的底部
问题描述
每当在消息中发送新消息时,我都想滚动到 div 的底部。我可以用 jQuery 做到这一点,但想知道 React 中最好的方法是什么。
这是我所在的 Messages.js 组件。提前谢谢你!
const Messages = (props) => {
const [inputMessage, setInputMessage] = useState('');
const handleChange = (event) => {
setInputMessage(event.target.value);
}
const handleSubmit = (event, message) => {
event.preventDefault();
props.setRoomMessages([...props.roomMessages, {id: Date.now(), name: props.username, message: inputMessage}]);
setInputMessage('');
}
const messages = props.roomMessages.map((message, index) => {
return (
<Message
key={index}
name={message?.name}
message={message?.message}
/>
)
})
return (
<>
<div className="Messages">
{messages}
</div>
<form className="chat-input form-inline" onSubmit={handleSubmit}>
<div className="form-group">
<input
className="form-control"
type="text"
value={inputMessage}
placeholder="Type a message..."
onChange={handleChange}
/>
<button className="btn btn-link">Send</button>
</div>
</form>
</>
)
}
export default Messages;
解决方案
试试这个,一种方法是使用ref
import { useState, useRef } from 'react';
const Messages = props => {
const [inputMessage, setInputMessage] = useState('');
const myMessage = useRef(null);
const handleChange = event => {
setInputMessage(event.target.value);
};
const handleSubmit = (event, message) => {
event.preventDefault();
props.setRoomMessages([...props.roomMessages, { id: Date.now(), name: props.username, message: inputMessage }]);
setInputMessage('');
// HERE IS THE NEW CODE
if (myMessage && myMessage.current) {
myMessage.current.scrollTop = myMessage.current.scrollHeight;
}
};
const messages = props.roomMessages.map((message, index) => {
return <Message key={index} name={message?.name} message={message?.message} />;
});
return (
<>
<div className="Messages" ref={myMessage}>
{messages}
</div>
<form className="chat-input form-inline" onSubmit={handleSubmit}>
<div className="form-group">
<input
className="form-control"
type="text"
value={inputMessage}
placeholder="Type a message..."
onChange={handleChange}
/>
<button className="btn btn-link">Send</button>
</div>
</form>
</>
);
};
export default Messages;
推荐阅读
- wpf - 如何基于 MaterialDesign 构建自定义组件?
- ios - 为 iOS 11.0 编译,但模块的最低部署目标为 iOS 13.0
- javascript - 如何避免 chrome 扩展在单击其他地方时关闭
- typescript - package.json “abc-domains”:“最新”,不工作
- python-3.x - 如何在 selenium python (Pytest) 中验证禁用的文本框
- java - 递归遍历树以打印范围内的值
- kotlin - Kotlin - 类型层次结构中的一般冲突
- xml - 使用 PowerShell 删除 XML 节点
- javascript - 将孩子从一个父母移动到另一个父母时的翻译动画
- java - 线程的 getId() 是否提供有保证的序列?