Question

对于ul元素，我为onScroll = {this.updateListOnScroll}事件设置了方法。内部方法我用新数组concat更新列表。然后scrollHeight属性增加到新值，但是在我的方法中它仍然很旧。因此，问题在于如何获取新的，更新的scrollHeight值。

for

由于this.props.getMessages（）;，我找不到它为什么不更新的方法。我得到新的数组和新的element.scrollHeight值1715。如果完全从浏览器中选择元素，则预期值为： document.querySelector（“。MessagesList__root”）。scrollHeight 1715

在这里，我将完整的组件MessagesList与消息一起添加和MessagesContainer，用新的concat旧数组更新数组：

  <ul
        className={css.root}
        onScroll={ this.updateListOnScroll }
        >
  </ul>
    updateListOnScroll = (e) => {
        console.log(e.target.scrollHeight); (865)
        if (e.target.scrollTop === 0) {
            console.log(e.target.scrollHeight); (865)
            this.props.getMessages();
        }
    };

import React, { Component } from "react";

import EventBus from '../../api/EventBus';
import socket from '../../api/socket';
import MessagesList from "../MessagesList";
import MessagesForm from "../MessagesForm";

import classNames from 'classnames';
import css from "./MessagesContainer.styl"


export default class MessagesContainer extends Component {

    static propTypes = {

    };

    constructor(props) {
        super(props);

        EventBus.subscribe('authorized_success', this.getMessages);
        EventBus.subscribe('messages_list', this.updateMessagesList);

        this.state = {
            list: null,
            nextPage: null
        };
    }

    componentDidMount() {
        const {
            wsToken,
            process
        } = this.props;

        socket.init(
            'ws://crm-ws-devices-m01.dev01.mcemcw.com/ws/v1/devices/messages/',
            wsToken,
            process
        );
    }

    getMessages = () => {
        socket.send(
            'messages_list',
            {
                paginate_by: 10,
                page: (this.state.nextPage === null) ? 1 : this.state.nextPage
            }
        );
    };

    // getPreviousPageMessages = () => {
    //     socket.send(
    //         'messages_list',
    //         {
    //             paginate_by: 10,
    //             page: this.state.nextPage
    //         }
    //     );
    //     EventBus.subscribe('messages_list', this.updateMessagesList);
    // }

    updateMessagesList = (params) => {
        const {
            list,
            nextPage
        } = this.state;

        const {
            data,
            paginate
        } = params;


        let newList = data;
        if (nextPage && nextPage >= 2) {
            newList = list.concat(...data);
        }

        this.setState({
            list: newList,
            nextPage: paginate.next_page
        });
    };

    addNewMessage = (message) => {
        const newList = this.state.list;

        newList.push(message);

        this.setState({
            list: newList
        })
    };

    sendMessage = (message) => {
        socket.send(
            'new_message',
            {
                msg: message
            }
        );

        EventBus.subscribe('new_message', this.addNewMessage);
    };

    render () {
        const { list } = this.state;
        if (!list) {
            return 'Loading...';
        }

        return (
            <div className={css.root}>
                <MessagesList
                    getMessages={this.getMessages}
                    list={list}
                />
                <div className={classNames(css.root__form,{
                    [css.form_emptymessage] : this.state.isEmptyMessage,
                    [css.form_longmessage] : this.state.isTooLongMessage
                })}>
                    <MessagesForm
                        sendMessage={this.sendMessage}
                        markAllNewAsRead={this.markAllNewAsRead}
                        placeholderWriteMessage={this.props.t.write_message}
                        tooLongMessage={this.props.t.characters_limit_exceeded}
                        isEmptyMessage={this.props.t.is_empty}
                        sendingAdvice={this.props.t.sendingAdvice}
                    />
                </div>
            </div>
        )
    }
}

如何在onScroll方法中更新scrollHeight

0 个答案: