事件發生后如何使用React滾動到某個元素？

Question

我是使用React的新手，並且已經構建了這些小代碼。 基本上，它顯示了單擊按鈕后的人員列表，但是當顯示該列表時，滾動條停留在屏幕頂部，我希望它向下滾動直到元素“ 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;

我嘗試設置屬性showPersons = true，並僅將按鈕的clicked事件用於向下滾動，所以它起作用了！ 但是，當我使用按鈕的clicked事件來切換人員列表時，滾動始終保持在頂部。

我希望有一個人可以幫助我！

Answer 1

如果我理解正確的話，在您togglePersonsHandle ，您要求React修改dom並同時運行scrollTo。 dom渲染時，它將取消scrollTo。

我可以想到兩種從中恢復的方法：

讓dom呼吸

將您的scrollTo代碼包裝在持續時間為0的setTimeout中。 這樣可以安排函數在render（）之后運行。

  togglePersonsHandle = () => {
  ...

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

在componentDidUpdate中做

我認為這更具反應性，您的意圖也更明確：顯示人員之后，滾動到該部分，但是您對此失去控制（其他狀態更改可能會觸發滾動）

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

---

希望能幫助到你！

Answer 2

帥哥，它將為您提供幫助。

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

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

</div>
</div>