反应自动滚动到聊天容器的底部

Question

我正在尝试使用react建立聊天页面。而且我显然遇到了一个问题，其中聊天气泡容器不会在componentDidMount和Update上自动向下滚动到底部。

我一直在浏览先前的问答，但找不到任何合适的解决方案。

这里是伙伴。

// renders the text form and all the messages

import React, { Component } from 'react';
import { convo } from '../../data/convo';
import SingleMessage from '../singleMessage/singleMessage';
import StyledForm from './styles';
import moment from 'moment';

class MessageRoom extends Component {

//convo contains the messages
    state = {
        convo,
        message: ''
    };

    handleChange = e => {
        const message = e.target.value;
        this.setState({ message });
    };

    onSubmit = e => {
        e.preventDefault();
        if (this.state.message) {
            const text = {
                message: this.state.message,
                owner: 0,
                date: moment()
            };

            this.setState({ convo: [...this.state.convo, text], message: '' });
        }
    };

    render() {
        return (
            <StyledForm>
                <div className="messages">
                    {this.state.convo.map(text => (
                        <SingleMessage text={text} key={text.date} />
                    ))}
                </div>
                <div>
                    <form
                        onSubmit={e => {
                            this.onSubmit(e);
                        }}
                    >
                        <input
                            type="text"
                            placeholder="Type a message"
                            value={this.state.message}
                            onChange={this.handleChange}
                        />
                        <button type="submit"> Send </button>
                    </form>
                </div>
            </StyledForm>
        );
    }
}

export default MessageRoom;

所以请帮助一个兄弟！