事件发生后如何使用React滚动到某个元素？

Question

I'm new using React and I have built these little code. Basically, it shows a list of persons after a button's click but when the list is shown, the scroll stays at top of screen and I want that it scrolls down until the element 'section'

 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import'./Person/Person.css';
 import Person from './Person/Person';

 class App extends Component {

   state = {
     persons: [
       {name:'Carlos', age:24},
       {name:'Liliana', age:20},
       {name:'Max', age:24}
     ],

     showPersons: false
   }


   togglePersonsHandle = () => {
     const doesShow = this.state.showPersons;
     this.setState( 
       { showPersons : !doesShow}
     );   

     /****************************************************/
     /* Here is where I want the window gets scroll down*/
     /****************************************************/
     if(!doesShow)
     {
       this.scrollToMyRef();
     }
   }

   // My method for scrolling
   scrollToMyRef = () => { 
     window.scrollTo({
         top: this.myRef.offsetTop, 
         behavior: "smooth"
     })
 }

   render() {

     let persons = null;
     if(this.state.showPersons)
     {
       persons = 
       (
         <div>
           {this.state.persons.map(person => 
               { return <Person 
                          name = {person.name} 
                          age = {person.age} >
                        </Person>
               }
             )
           }          
         </div>
       );
     }



     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <p>
             Edit <code>src/App.js</code> and save to reload.
           </p>
           <a
             className="App-link"
             href="https://reactjs.org"
             target="_blank"
             rel="noopener noreferrer"
           >
             Learn React
           </a>          
         </header>   


         /************    My reference   *****************/ 
         <section ref={ el => this.myRef = el }>

         <button onClick={this.togglePersonsHandle}>
            Click me to toggle 
         </button>

         {persons}
         </section>   
       </div>    
     );

   }
 }

 export default App;

I tried setting the property showPersons = true and use the button's clicked event just for scroll down, and it works! But when I use the button's clicked event for toggle the list of persons, the scroll stays at top all the time.

I hope someone can help me!

Answer 1

If I understand correctly, in you togglePersonsHandle , you're asking React to modify the dom & run scrollTo at the same time. When the dom renders, it cancels scrollTo.

I can think of 2 ways to recover from this:

Let the dom breathe

Wrap your scrollTo code inside a setTimeout with 0 duration. This schedule the function to run after render().

  togglePersonsHandle = () => {
  ...

  if (!this.state.showPersons) {
+   setTimeout(() => {
      this.scrollToMyRef();
+   }, 0)
  }

Do it in componentDidUpdate

I think this is more react-y, also your intention is clearer: once the persons are shown, scroll to that section, however you lose some control over this (other state change might trigger scroll)

+ componentDidUpdate() {
+ // at this point, state's already updated
+   if (this.state.showPersons) {
+     this.scrollToMyRef();
+   }
+ }

---

Hope it helps!

Answer 2

Cool buddy it will help you.

const scrollToDiv=()=>{
document.getElementById('afterEventTrigger').scrollIntoView(true);
}

<div>
<button onClick={this.scrollToDiv}></button>
<div id='afterEventTrigger'>

</div>
</div>