wie man einen infinite scroller macht/"Load More" in reactjs

Question

Ich bin neu in reactjs und ich bin so verwirrt, wie man eine infinite scroller oder "load more" -Funktionalität.

so hier ist mein componentDidMount:

componentDidMount() { 
    $.ajax({ 
    url:'http://localhost:5118/api/employeedetails/getemployeedetails/', 
    success:(data)=>{ 

    this.setState({ 
     jsonReturnedValue:data , isLoading: false 
    }) 
    } 
}) 

} 

und das, wo ich meinen Tisch laden

renderItem(d, i) { 
    return <tr key={i} > 
    <td> {d.Employee_ID} </td> 
    <td>{d.Employee_Name}</td> 
    <td>{d.Address }</td> 
    <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID, d.Employee_Name, d.Address , d.Department , i)} data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td> 
    <td><center><button className ='btn btn-danger' onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td> 
    </tr> 
} 

render() { 
     if(this.state.isLoading) { 
      return <span className="Loader"> 
        <h1> 
       <span>Loading</span> 
       <span className="Loader-ellipsis" > 
       <span className="Loader-ellipsisDot">.</span> 
       <span className="Loader-ellipsisDot">.</span> 
       <span className="Loader-ellipsisDot">.</span> 
       </span> 
      </h1> 
     </span> 
    } 

    let {jsonReturnedValue} = this.state; 
    const isEnabled = this.canBeSubmitted(); 


    return(
    <div> 
    <div> 

     <div className="container"> 
      <h1> Listof Employees </h1> 
      <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button> 
      <table className= "table table-bordered" id="result"> 
       <tbody> 
       <tr> 
         <th>ID</th> 
         <th>Name</th> 
         <th>Address</th> 
         <th>Update</th> 
         <th>Delete</th> 
       </tr> 
        {/* {this.state.tableLoading? <LoadingComponent/>: this.renderItem()} 
     */} 
        {jsonReturnedValue.map((d,i) => this.renderItem(d,i))} 

     </tbody> 

      </table> 
      </div> 

Answer 1

Sie müssen zuerst eine OnScroll eventlistener binden, die Sie in componentDidMount()

componentDidMount() { 
. 
. 
window.addEventListener('scroll', this.onScroll); 
} 

tun können

Dann müssen Sie eine onScroll-Methode in Ihrer Komponente definieren a nd überprüfen, ob Benutzer auf die unten auf der Seite gescrollt hat:

onScroll =() => { 
    // write your code here to check if user has scrolled to the bottom of page 
if(true) { // scrollbar is at the bottom 
    this.fetchMoreData(); 
} 
} 

Dann Ihre fetchMoreData Funktion definieren, die Liste des jsonReturnedValue zu aktualisieren.

Dies ist nur eine Blaupause. Sie müssen sich selbst um die Funktionalitäten kümmern.

Scrollen zu diesem Check if a user has scrolled to the bottom

beziehen überprüfen, um in mehr Verständnis für Ereignis-Listener zu erhalten Reagieren diese https://stackoverflow.com/a/41406239/3323709