React antd Table点击下一页后selectedRows丢失之前页选择内容的问题

一、问题

使用了React antd 的<Table>标签,是这样记录选中的行id与行内容的:

                <Table
                dataSource={data.list}
                rowSelection={{
                  selectedRowKeys: selectedIdsInSearchTab,
                  onChange: this.onSelectChange,
                }} // 表格是否可复选,加 type: 'radio',是单选,去掉是多选
                columns={this.getColumns()}
                rowKey={record => record.id}
                pagination={false}
                loading={loading}
                size="middle"
                bordered
                scroll={{ x: 1100 }}
              />

其中有this.onSelectChange方法,内容如下:

  // 复选框选中后的方法
  onSelectChange = (selectedIds, selectedRows) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'SelectTableJS/updateSelectedIdsInSearchTab',
      selectedIds,
      selectedRows,
    });
  };

然后SelectTableJS.js中,有变量保存了下选中id与选中行数据:

export default {
  namespace: 'SelectTableJS',

state: {
    selectedIdsInSearchTab:[],
    selectedRowsInSearchTab:[],
},
=====================================
reducers: {
    updateSelectedIdsInSearchTab(state, action) {
      return {
        ...state,
        selectedIdsInSearchTab: action.selectedIds || state.selectedIds,
        selectedRowsInSearchTab: action.selectedRows || state.selectedRows,
      };
    },

},

后续其它页面使用时,就可以获取到这2个变量:


@connect(({ SelectTableJS }) => ({
  SelectTableJS, 
}))
===========================
  render() {
    const {
      SelectTableJS: { selectedIdsInSearchTab,selectedRowsInSearchTab },
    } = this.props;

但是使用时,会发现,如果在表格的多页中都选择了某些行,最后记录选中id的数组selectedIdsInSearchTab是正确的,但是记录选中行内容的数组selectedRowsInSearchTab 是不正确的,只有表格当前页选中的行,其它页选中行的内容丢失了。

二、排查过程

排查发现,这个是框架的bug,没办法修改。
参考文章:
https://blog.csdn.net/yoyoyo8888/article/details/132324571

三、解决方法

因为确实需要多页选中行的数据,只有id不够,所以给表格加了2个按钮:
在这里插入图片描述

1.这样用户可以先选择当前页数据,然后点击添加按钮,就把当前页选中行添加到自己准备的数组中。

2.用户翻页,再次选择数据,再次点击添加按钮,把当前页选中行添加到自己准备的数组中。

3.注意数组需要去重,不能重复选择。

4.注意数组判空。

5.如果选错,只能先点清空按钮,然后重新选择。

四、备注

1.遗留问题是,如果用户多页都选择了数据,然后点击添加按钮,那还是只会把当前页数据添加到自己准备的数组中,之前页选择的不会添加。

2.后期可以优化,因为id是全的,所以可以通过id查询后台接口、获取到每行的内容、添加到数组中?(不如优化成只需要id就足够,不要每行其它内容更好)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以通过antd的`Table`组件中的`rowSelection`属性来实现多选和单选功能,并通过`selectedRowKeys`属性来获取当前选中的行的key值。 具体实现步骤如下: 1. 在`<Table>`组件中添加`rowSelection`属性,设置`type`为`checkbox`表示启用多选功能。 ``` <Table rowSelection={{ type: "checkbox", onChange: this.onSelectChange, selectedRowKeys: this.state.selectedRowKeys }} columns={columns} dataSource={data} /> ``` 2. 在`<Table>`组件中添加`onChange`事件处理函数`onSelectChange`。 ``` onSelectChange = (selectedRowKeys, selectedRows) => { this.setState({ selectedRowKeys }); }; ``` 3. 在`render()`函数中获取当前选中行的key值。 ``` const { selectedRowKeys } = this.state; ``` 完整示例代码如下: ``` import React from "react"; import ReactDOM from "react-dom"; import { Table } from "antd"; const columns = [ { title: "Name", dataIndex: "name" }, { title: "Age", dataIndex: "age" }, { title: "Address", dataIndex: "address" } ]; const data = [ { key: "1", name: "John Brown", age: 32, address: "New York No. 1 Lake Park" }, { key: "2", name: "Jim Green", age: 42, address: "London No. 1 Lake Park" }, { key: "3", name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park" }, { key: "4", name: "Jim Red", age: 32, address: "London No. 2 Lake Park" } ]; class App extends React.Component { state = { selectedRowKeys: [] }; onSelectChange = (selectedRowKeys, selectedRows) => { this.setState({ selectedRowKeys }); }; render() { const { selectedRowKeys } = this.state; const rowSelection = { type: "checkbox", onChange: this.onSelectChange, selectedRowKeys }; return ( <Table rowSelection={rowSelection} columns={columns} dataSource={data} /> ); } } ReactDOM.render(<App />, document.getElementById("container")); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

追逐梦想永不停

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值