Деактивировать предыдущую следующую кнопку, если начало / конец набора записей в React - PullRequest
Новая
       12

Деактивировать предыдущую следующую кнопку, если начало / конец набора записей в React

0 голосов
/ 09 ноября 2019

Я получаю API отдыха, используя Axios.

Я хотел бы деактивировать (отключить нажатие) кнопки, если следующая кнопка находится в конце подачи страницы или предыдущая кнопка находится на первой странице.

API начинается с 0 страницы(Обычно API начинается на странице № 1)

Мой код - 

import React, { Component } from 'react';
import axios from 'axios';
import Table from './Table'

class FetchUsers extends Component
{
    constructor(props) {
        super(props);
        this.state = {
            starDetails: [],
            activePage:0,
            totalPages: null,
            itemsCountPerPage:null,
            totalItemsCount:null,
        };
        this.fetchURL = this.fetchURL.bind(this);
    }

fetchURL(page) {
        axios.get(`<API URL>&page=${page}&size=10`)
            .then( response =>
            {
                    //console.log(response);
                const totalPages = response.data.page.totalPages;
                const itemsCountPerPage = response.data.page.size;
                const totalItemsCount = response.data.page.totalElements;

                this.setState({totalPages: totalPages})
                this.setState({totalItemsCount: totalItemsCount})
                this.setState({itemsCountPerPage: itemsCountPerPage})

                const starUsers = response.data.users;
                this.setState({starUsers: starUsers});

            })
            .catch(e =>
            {
                console.log(e);
                this.setState({...this.state, isFetching: false});
            });
    }

    componentDidMount () {
        this.fetchURL(this.state.activePage)
    }

    previousPage = () => {
        if (this.state.activePage >=0)
            this.setState({activePage : this.state.activePage - 1})
        this.fetchURL(this.state.activePage-1)
    }

    nextPage = () => {
        if (this.state.activePage < this.state.totalPages)
            this.setState({activePage : this.state.activePage + 1})
        this.fetchURL(this.state.activePage+1)
    }
render()
    {
        return (
            <div className="App">
                <Table stars={ this.state.starUsers } />
                <div className="d-flex justify-content-center">
                    <button onClick={this.previousPage}>Previous Page</button>
                    <button onClick={this.nextPage}>Next Page</button>
                </div>
            </div>
        )
    }
}

export default FetchUsers;

Любая помощь очень ценится. Заранее спасибо.

...