reactjs中弹出新消息时如何将div滚动到底部零

Question

我正在构建一个聊天应用程序。 尽管一切正常。 但这里的问题是，当用户键入新消息时，它会出现在聊天显示区域下方，用户必须手动向下滚动才能看到消息。 我想知道如何在我的应用程序中解决此问题。 这样当消息提交时，它会立即出现在聊天区域中。

这是我的代码。

聊天室页面.js

<Grid  item xs={12}>
                    <div style={{maxHeight: '500px', height: '500px',
                        position: 'fixed',width:'100%',
                        overflow: 'auto'}}>
                    {receivedMessage && receivedMessage.content &&
                    receivedMessage.content.map((item,index) => {
                        if(item.senderId === item.vendorId) {
                            return (
                            <ChatThread key={index} image={item.senderImage} right={true} content={item.content}/>
                            )
                        }else {
                        return (
                            <ChatThread key={index}  image={item.reciverImage} content={item.content}/>
                        )}
                    }) }
                    </div>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                </Grid>

这是ui

Answer 1

您可以做的一件事是在 div 上创建一个 ref 来呈现聊天消息。 提交聊天消息后，只需执行ref.current.scrollTop = ref.current.scrollHeight;

代码片段：

import React, { useState, useEffect, useRef } from "react";

const MessageContainer = props => {
    const [messages, setMessages] = useState([]);
    const ref = useRef();
    useEffect(() => {
        // api call get messages
        setMessages([...]);
    }, [messages])

    const submitMessage = () => {
        // post message to server
        ref.current.scrollTop = ref.current.scrollHeight;
    }

  return <>
        ... 
        <Grid  item xs={12}>
            <div ref={ref} style={{maxHeight: '500px', height: '500px',
                position: 'fixed',width:'100%',
                overflow: 'auto'}}>
            {receivedMessage && receivedMessage.content &&
            receivedMessage.content.map((item,index) => {
                if(item.senderId === item.vendorId) {
                    return (
                    <ChatThread key={index} image={item.senderImage} right={true} content={item.content}/>
                    )
                }else {
                return (
                    <ChatThread key={index}  image={item.reciverImage} content={item.content}/>
                )}
            }) }
            </div>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </Grid>
      <form onSubmit={submitMessage}>
        <input type='text'/>
        <button type='submit'>Submit</button>
      </form>
     ...
      </>
};

export default MessageContainer;