0

我正在创建一个松弛克隆应用程序，并且希望当用户添加新消息或当新消息通过它时滚动到消息的底部......当我重新加载频道或使用 enter 提交消息时它可以工作。但是，当我单击按钮时，什么也没有

我已经尝试了几个 npm 包并且移动 REF 没有运气

 componentDidUpdate(){
    {this.messagesEnd && this.scrollToBottom()}    

  }

  scrollToBottom = ()=> {

    this.messagesEnd.scrollIntoView({behavior: 'smooth'})
   }

// 在输入时添加发送消息

handleKeyDown = (e) => {
    if(e.keyCode === 13){
        this.sendMessage()
    }

    const { message, typingRef, channel, user } = this.state;


    if(message){
        typingRef
           .child(channel.id)
           .child(user.uid)
           .set(user.displayName)
    }else{
        typingRef
        .child(channel.id)
        .child(user.uid)
        .remove()

    }

sendMessage = () => {
    const { getMessagesRef } = this.props;
    const { message, channel, user, typingRef } = this.state;


    if(message) {
        this.setState({loading: true});
        getMessagesRef()
            .child(channel.id)
            .push()
            .set(this.createMessage())
            .then(()=> {
                this.setState({loading: false, message: '', errors: [] });
                typingRef
                .child(channel.id)
                .child(user.uid)
                .remove()
            })
            .catch(err => {
                console.error(err);
                this.setState({
                    loading: false,
                    errors: [...this.state.errors, err ]
                })
            })
    }else{
        this.setState({
            errors: [...this.state.errors, {message: "Add a message"}]
        })
    }
}

     <Fragment>
            <MessagesHeader 
            channelName = {this.displayChannelName(channel)}
            numUsers = {numUsers}
            handleSearchChange={this.handleSearchChange}
            searchLoading = {searchLoading}
            isPrivateChannel = {isPrivateChannel}
            handleStar = {this.handleStar}
            isChannelStarred = {isChannelStarred}

            />

                <Segment>

                        <Comment.Group className='messages'>


                            {this.displayMessagesSkeleton(messagesLoading)}
                            {searchTerm ? this.displayMessages(searchResults) : this.displayMessages(messages)  }

                            {this.displayTypingUsers(typingUsers)}
                            <div ref={node => this.messagesEnd = node}></div>                                               

                        </Comment.Group>


                </Segment>



            <MessageForm
            messagesRef ={messagesRef}
            currentChannel = {channel}
            currentUser = { user }
            isPrivateChannel = {isPrivateChannel}
            getMessagesRef = {this.getMessagesRef}
             />


        </Fragment>
4

1 回答 1

0

创建一个具有固定高度的容器组件，例如 500px，并在其中创建另一个包含所有消息的组件（下例中的 allMessages）

<div>
  <div className={classes.messagesThread} ref={(container) => { this.container = container; }}>
    <div className={classes.container} ref={(allMessages) => { this.allMessages = allMessages; }}>
    </div>
  </div>
</div>

在您的组件中创建一个方法来滚动容器，如下所示，使容器滚动到底部。

scroll = () => {
    if (this.container && this.allMessages) {
      this.container.scrollTop = this.allMessages.clientHeight;
    }
  }

现在可以在每次用户发送新消息或接收到新消息时调用此滚动方法。将以下代码添加到您的 componentDidUpdate 生命周期方法。

componentDidUpdate(prevProps) {
    if (prevProps !== this.props.thread) {
      this.scroll();
    }
  }

正如您在上面的代码中看到的，我们将方法调用包装在 if 语句中，用于跳过额外的重新渲染。如果您直接调用该方法，那么它将在每次道具和状态更新时运行。注意：我的消息在线程道具中，您可以将其更改为您的道具名称。

并且也可以在 componentDidUUpdate 生命周期方法上调用以在页面加载时默认滚动到底部。

componentDidMount() {
    // by default scroll to bottom on load
    this.scroll();
  }
于 2019-05-19T03:53:03.590 回答