Salut, je crée une application où il y a une liste et sur le montage de composants, je veux toujours aller au bas de la liste.

Voici ma méthode render

<div className="message-placeholder" 
                 ref={this.myRef}>
                <List
                    dataSource={this.state.data}
                    renderItem={item => (
                    <List.Item key={item.id}>
                        <List.Item.Meta
                            avatar={<Avatar style={{ backgroundColor: '#08c' }} icon="user" />}
                            title={<a href="#">{item.name}</a>}
                            description={item.message}
                        />
                    </List.Item>
                    )}
                >
                    {this.state.loading && this.state.hasMore && <Spin className="demo-loading" />}
                </List>

Dans mon constructeur j'ai créé une nouvelle réf. Ainsi

constructor(props){
        super(props);
        this.myRef = React.createRef();

Et mon css ressemble à ceci.

.message-placeholder {
    height: 300px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

Maintenant, à chaque mise à jour des composants, j'essaie d'aller au bas de la liste. Voici comment je fais ça.

componentDidUpdate() {
        this.scrollToBottom();
    }

scrollToBottom = () => {
        this.myRef.scrollIntoView({block: 'end', behavior: 'smooth'});
    }

Cependant, cela ne fonctionne pas, j'obtiens l'erreur suivante _this.myRef.scrollIntoView is not a function

Quelqu'un peut-il m'aider à résoudre ce problème s'il vous plaît. Merci d'avance. :)

3
Shadid 12 avril 2018 à 20:31

3 réponses

Meilleure réponse

Je suggérerais d'utiliser un package dédié comme react-scroll

-1
Martin Reiche 12 avril 2018 à 22:33

Vous pouvez l'utiliser pour faire défiler une section particulière vers bottom

document.querySelector(".message-placeholder").scrollTo(0,document.querySelector(".message-placeholder").scrollHeight);

Et scrollIntoView n'a pas une bonne compatibilité de navigateur, vérifiez ceci https://developer.mozilla.org/en- US / docs / Web / API / Element / scrollIntoView # Browser_compatibility.

1
Nishant Dixit 12 avril 2018 à 17:50
<div className="message-placeholder" ref={(ref) => { this.myRef = ref; }}>
-2
Serhiy Boreyko 3 janv. 2019 à 10:26