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

背景

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

分页组件问题描述

分页组件点击分页和 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}
/>

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

启示录

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值