Javascript 如何在单击或提交时滚动到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;

const Messages=（道具）=>{
const[inputMessage，setInputMessage]=useState（“”）；
常量handleChange=（事件）=>{
setInputMessage（event.target.value）；
}
const handleSubmit=（事件、消息）=>{
event.preventDefault（）；
setRoomMessages（[…props.roomMessages，{id:Date.now（），name:props.username，message:inputMessage}]）；
setInputMessage（“”）；
}
const messages=props.roomMessages.map（（消息，索引）=>{
返回(
)
})
返回(
{消息}
‍
发送
)
}
导出默认消息；

试试这个，一种方法是使用

从'react'导入{useState，useRef}；
const Messages=props=>{
const[inputMessage，setInputMessage]=useState（“”）；
const myMessage=useRef（null）；
const handleChange=事件=>{
setInputMessage（event.target.value）；
};
const handleSubmit=（事件、消息）=>{
event.preventDefault（）；
setRoomMessages（[…props.roomMessages，{id:Date.now（），name:props.username，message:inputMessage}]）；
setInputMessage（“”）；
//这是新代码
if（myMessage&&myMessage.current）{
myMessage.current.scrollTop=myMessage.current.scrollHeight；
}
};
const messages=props.roomMessages.map（（消息，索引）=>{
返回；
});
返回(
{消息}
‍发送
);
};
导出默认消息；

在React中集成jQuery有很多方法（不过如果可以的话，应该避免这样做）。您可以使用vanilla javascript实现相同的功能。检查一下这个问题的例子：这很有效！非常感谢你。你能解释一下电流吗？或者给我指一些文章？非常感谢。不用担心，我在上面链接的ref的文章应该解释一切。我建议你通读一遍。否则，解释它的特定部分@KenRyan

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;