Question

关于laravel，reactJS和分页的混合存在疑问。我使用了来自youtube的视频文件，但最终无法获得结果。我的主意错了。来自数据库的数据可以完美显示，但是分页按钮根本不起作用。

Web.php

    Route::get('/directory_pagination_test', function () {
        return view('directory_pagination_test');
    });

    Route::get('/directory_pagination_list/', 'User_Controller@index_pagination');

控制器：

class User_Controller extends Controller
{
    public function index_pagination()
    {
        $result = User::paginate(2);
        return $result;
    }

}

Directory_pagination.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import Pagination from "react-js-pagination";

export default class Directory_pagination extends Component {

    constructor(props){
        super(props);
        this.state = {
            users: [],
            activePage:1,
            itemsCountPerPage:1,
            totalItemsCount:1
        }
        this.handlePageChange = this.handlePageChange.bind(this);
    }
    componentWillMount() {
        axios.get('/directory_pagination_list')
            .then(response => {
                this.setState({users: response.data.data});
        }).catch(errors => {
            console.log(errors);
        })
    }

    handlePageChange(pageNumber) {
        console.log(`active page is ${pageNumber}`);
        this.setState({activePage: pageNumber});
    }

    render() {
        return (
            <div className="container">
                {this.state.users.map(user =><li key={user.id}>{user.name}</li>)}

                <Pagination
                    activePage={this.state.activePage}
                    itemsCountPerPage={10}
                    totalItemsCount={100}
                    pageRangeDisplayed={5}
                    onChange={this.handlePageChange}
                />

            </div>
        );
    }
}

if (document.getElementById('directory_pagination')) {
    ReactDOM.render(<Directory_pagination />, document.getElementById('directory_pagination'));
}

那么这可能是问题所在。你能帮我吗？

谢谢。

Laravel ReactJS-分页按钮不起作用

0 个答案: