antd Pagination 组件绑定回调函数问题整理

背景

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}
/>

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

启示录

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