背景

react 前端框架，antd 库提供了分页和列表组件，本文整理分页组件的 onChange 和 onShowSizeChange 事件回调函数绑定时需要注意的问题。

分页组件问题描述

分页组件点击分页和 pageSize 的时候，需要调用当前组件的 doSearch 方法发送 ajax 请求给后台，请求对应页的数据。但是实现的时候，始终无法访问到当前组件的函数和 this.state 信息。

我的用法是，直接绑定函数：

<Pagination style={{marginTop:"10px",float:"right"}}     total={this.state.total || 0}     showSizeChanger // 是否可以改变pageSize     showQuickJumper={false}// 是否可以快速跳转某一页     onShowSizeChange={this.change}     onChange={this.sizeChange}     showTotal={_totalCount => `共 ${_totalCount} 条`}     current={this.state.pageNo || 1}     pageSize={this.state.pageSize || 10}   />

直接指定事件为当前组件的函数的时候，函数中的 this 对象并不是当前组件，而是分页组件自身，反正就是无法访问到父组件的函数和属性。

change 函数中 this.doSearch 始终报错，因为被调用时 this 已经转移了。

这个问题困扰了两天，终于在万能的互联网的帮助下找到了两种解决办法。

方法一：为函数 bind 绑定 this

配置分页属性信息，并为函数绑定 this.change.bind(this) 对象为当前组件。

const paginationProp = {     currentPage: this.state.pageNo,      pageSize: this.state.pageSize,      totalCount: this.state.total,      onChange: this.change.bind(this),      onShowSizeChange: this.sizeChange.bind(this),  }        <Pagination style={{marginTop:"10px",float:"right"}}     total={this.state.total || 0}     showSizeChanger // 是否可以改变pageSize     showQuickJumper={false}// 是否可以快速跳转某一页     showTotal={_totalCount => `共 ${_totalCount} 条`}     current={this.state.pageNo || 1}     pageSize={this.state.pageSize || 10}     {...paginationProp} />

<Pagination style={{marginTop:"10px",float:"right"}}    total={this.state.total || 0}    showSizeChanger // 是否可以改变pageSize    showQuickJumper={false}// 是否可以快速跳转某一页    onShowSizeChange={(page,pageSize)=> this.doSearch(pageSize,page,this.state.keyword)}    onChange={(page,pageSize)=> this.doSearch(pageSize,page,this.state.keyword)}    showTotal={_totalCount => `共 ${_totalCount} 条`}    current={this.state.pageNo || 1}    pageSize={this.state.pageSize || 10}/>

函数设置中直接调用到父组件的函数，而不是直接传递当前父组件的函数。

启示录

接触一个新技术的时候，总有很多坑点不知道。