javascript - 渲染分页中的 OnPageChange 在页面加载中调用 handlePageClick

问题描述

我是 React js 的新手，我的 React分页，在页面加载时调用handlePageClick 。仅当用户单击时才会触发它。

下面是我的代码

export default class Time extends Component {
constructor(props, context) {
    super(props, context);

    this.state = {
         selectedIndex: -1,

        page: 0,
        links: null,
        meta: null,
    };

    this.handleClick = this.handleClick.bind(this);
}

handlePageClick (data){
      this.fetchData(data.selected); // will call API to load data
}

renderPaginator() {
    const { page, meta, links } = this.state;

    return links.prev || links.next ? (
        <ReactPaginate
            initialPage={page}
            previousLabel={'Prev'}
            nextLabel={'Next'}
            breakLabel={'...'}
            breakClassName={'break-me'}
            pageCount={meta.last_page}
            marginPagesDisplayed={2}
            pageRangeDisplayed={3}
            onPageChange={this.handlePageClick}
            containerClassName={'pagination'}
            subContainerClassName={'pages pagination'}
            activeClassName={'active'}
        />
    ) : null;
}

renderTT() {
    const { meta } = this.state;

    return (
        <React.Fragment>
            <div className="table-responsive">
                <table className="table table-responsive table-hover table-condensed ts-listing">
                    <thead>
                        {this.renderHeadings()}
                    </thead>
                    <tbody>
                        {this.renderRows()}
                    </tbody>
                </table>
                {meta ? this.renderPaginator(Array(meta.last_page).fill(0), this.handlePageClick) : null} 
            </div>
        </React.Fragment>
    );
}
}

我努力了：

onPageChange={e => this.handlePageClick(e)}

没有任何工作。页面加载时onPageChange仍在调用handlePageClick 。当我注释掉onPageChange时，handlePageClick 没有被调用，所以问题出在onPageChange？

标签： javascriptreactjsreact-nativepagination

javascript - 渲染分页中的 OnPageChange 在页面加载中调用 handlePageClick

问题描述

解决方案

推荐阅读