React+Antd实现搜索与分页功能

根据后台Api，实现搜索与分页功能。

模糊查询Api：
src/api/accout.js

// 模糊查询接口
export function searchVideo (data) {
    return service.request({
        url:"/video/select",
        method:"get",
        params:data         //请求类型为 get 时
    })
}

View/admin/index.js（主界面）

//引入Antd分页组件：
import { Pagination } from 'antd';
//获取视api
import { getAllvideo } from '../../api/accout'
import Search from '../search/index'

export default class Admin extends Component {
	
	constructor(props) {
        super(props);
        this.state = {
            //创建数组保存获取的接口数据
            list: [],
            //每页10条数据
            pageSize: 10,
            pageNum: 1
        };
    }
	
	// 生命周期函数---渲染后调用
    componentDidMount() {
        this.getApiData();
    }
    
	//获取视频数据函数：
	getApiData = (values) => {
        getAllvideo({
            pageNum: this.state.pageNum,
            pageSize: this.state.pageSize
        }).then(res => {
            console.log(res);
            this.setState({
                //获取的数据保存到list数组
                list: res.data
            })
        }).catch(err => {
            console.log(err)
        })
    }
	
	//父组件搜索函数，子组件（搜索组件）调用此函数，改变list列表，从而根据搜索内容展示对应数据。
	//子组件（搜索组件）通过在输入框输入关键字，调用模糊查询api，返回相关数据
	valueChange(data) {
        this.setState({
            list: data
        })
    }	
	
	
	//页码点击事件（分页）（重点）
    onPageNumChange(pageNum) {
        // alert(pageNum)
        this.setState({
            pageNum 
        }, () => {
            getAllvideo({
                pageNum: this.state.pageNum,
                pageSize: this.state.pageSize
            }).then(res => {
                console.log(res);
                this.setState({
                    //获取的数据保存到list数组
                    list: res.data
                })
            }).catch(err => {
                console.log(err)
            })
        })
    }
	
		
	render() {
        const list = this.state.list;

        return (
            <>
                <div className="xxxx">
                    <Nav />

                    <Search
                        list={list}
                        ValueChange={this.valueChange.bind(this)}
                    />

                    <Content list={list} />

                    <Pagination
                        style={{
                            display: 'flex', 
                            justifyContent: 'center',
                            marginTop: '25px'
                        }}
                        total={this.state.videos}
                        current = {this.state.pageNum}
                        onChange={(pageNum) => this.onPageNumChange(pageNum)}
                    />
                </div>
            </>
        )
    }
}

View/search/index.js（搜索组件）

import React, { Component } from 'react'
import './index.css'
//引入模糊查询接口：
import { searchVideo } from '../../api/accout'

export default class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            form: {
                title: '',
                source: '',
                subject: '',
                remark: ''
            }
        }
    }

    //输入框事件
    handleChange = (key, e) => {
        let form = this.state.form
        for (let i in form) {

            if (i === key) {
                form[i] = e.target.value
                this.setState(form)
            }
        }
        console.log('输入框的值',form)
    }


    //提交事件
    handleSubmit(e) {
        e.preventDefault();

        const params = {
            title: this.state.form.title,
            source: this.state.form.source,
            subject: this.state.form.subject,
            remark: this.state.form.remark
        }

        searchVideo(params)
            .then(res => {
                if (res.status === 200) {
                    // const arr = []
                    console.log('搜索接口返回值', res)
                    this.props.ValueChange(res.data)
                } else {
                    alert('搜索接口出现问题')
                }
            }).catch(err => {
                console.log(err)
            })
    }


    render() {
        return (
            <>
                <form action="get" onSubmit={this.handleSubmit.bind(this)}>
                    <div className="search-all">
                        <div className="search-main">
                            <div className="search-title">
                                <label htmlFor="one">标题：</label>
                                <input type="text" id="one" placeholder="title" onChange={this.handleChange.bind(this, 'title')} />

                            </div>
                            <div className="search-source">
                                <label htmlFor="two">来源：</label>
                                <input type="text" id="two" placeholder="source" onChange={this.handleChange.bind(this, 'source')} />

                            </div>
                            <div className="search-subject">
                                <label htmlFor="three">主体：</label>
                                <input type="text" id="three" placeholder="subject" onChange={this.handleChange.bind(this, 'subject')} />

                            </div>
                            <div className="search-remark">
                                <label htmlFor="four">备注：</label>
                                <input type="text" id="four" placeholder="remark" onChange={this.handleChange.bind(this, 'remark')} />
                            </div>
                        </div>


                        <div className="search-kuang">
                            <input type="submit" value="搜索" />
                        </div>
                    </div>
                </form>
            </>
        )
    }
}