javascript - React auto scroll to bottom on a chat container - Stack Overflow

admin管理员组

文章数量:1293644

I am trying to build a chat page using react. And I have obviously e to a problem where the chat bubbles container doesn't automatically scroll down to bottom on ponentDidMount and Update.

I was looking through the previous Q&A but couldn't find any decent solution.

Here is the oponent.

// 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;

So please help a brother out!

I am trying to build a chat page using react. And I have obviously e to a problem where the chat bubbles container doesn't automatically scroll down to bottom on ponentDidMount and Update.

I was looking through the previous Q&A but couldn't find any decent solution.

Here is the oponent.

// 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;

So please help a brother out!

• javascript
• reactjs

Share Improve this question Follow asked Mar 12, 2019 at 9:47 AbrehamAbreham 45511 gold badge44 silver badges1515 bronze badges 3

• 3 Put a ref on your container, and scroll it to the bottom in ponentDidMount. this.ref.current.scrollTop = this.ref.current.scrollHeight; – Tholle Commented Mar 12, 2019 at 9:50
• can you send a snippet or something! – Abreham Commented Mar 12, 2019 at 9:53
• And what does current stand for? – Abreham Commented Mar 12, 2019 at 9:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

// 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 {
	constructor() {
		super();
		this.state = {
			convo,
			message: ''
		};

		this.mesRef = React.createRef();
	}

	ponentDidMount() {
		this.scrollToBottom();
	}

	scrollToBottom = () => {
		this.mesRef.current.scrollTop = this.mesRef.current.scrollHeight;
	};

	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: '' },
				() => {
					this.scrollToBottom();
				}
			);
		}
	};

	render() {
		return (
			<StyledForm>
				<div className="messages" ref={this.mesRef}>
					{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;

updated the code to the new ref usage.

There is a very simple way to achieve it some css trick

Wrap Html into parent div for message

<div className="message-holder">
    <div className="message"> //state all message
       ...text goes here
    </div>
</div>

<style>
.message-holder{
   position:absolute;
   bottom:0;
   //if required overflow to scroll add below css
  overflow-y:scroll
  max-height: //whatever is required
}
.message{
   //css style goes here
}
</style>

Have question ping me

本文标签： javascriptReact auto scroll to bottom on a chat containerStack Overflow