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;