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>

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

2 个答案:

让dom呼吸

在componentDidUpdate中完成