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

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;

所以请帮助兄弟！

Answer 1

// 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();
	}

	componentDidMount() {
		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;

将代码更新为新的 ref 用法。

Answer 2

有一个非常简单的方法来实现它一些 css 技巧

将 Html 包装到父 div 中以获取消息

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

有问题联系我