react 使用antd 的table组件,批量操作后还存留之前的打钩项

官网提供一个方法代码如下:

import { Table, Button } from 'antd';

const columns = [{
  title: '姓名',
  dataIndex: 'name',
}, {
  title: '年龄',
  dataIndex: 'age',
}, {
  title: '住址',
  dataIndex: 'address',
}];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `李大嘴${i}`,
    age: 32,
    address: `西湖区湖底公园${i}号`
  });
}

const App = React.createClass({
  getInitialState() {
    return {
      selectedRowKeys: [],
      loading: false,
    };
  },
  start() {
    this.setState({ loading: true });
    // 模拟 ajax 请求,完成后清空
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  },
  onSelectChange(selectedRowKeys) {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  },
  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      
{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}
); } }); ReactDOM.render(, mountNode);

但是我的数据存储在Store中,使用这个修改数据,所以修改了相关的代码,但是我想复杂了

this.state = {
    selectedRows: [],
    list: []
};

const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys changed: ${selectedRowKeys}`);
                this.props.Store.selection.keys = selectedRowKeys;
                this.props.Store.selection.rows = selectedRows;
                this.setState({
                    selectedRowKeys: this.props.Store.selection.keys
                })
                console.log('selectedRowKeys'+selectedRowKeys+JSON.stringify(this.props.Store.selection));
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
                console.log(JSON.stringify(this.props.Store.selection))
            },
            onSelectAll: (selected, selectedRows) => {
                console.log(selected, selectedRows);
                console.log(JSON.stringify(this.props.Store.selection))

            }
        }

render:

{ console.log(current, pageSize); this.props.Store.tableSize = pageSize; this.props.Store.fetchTable(pageSize, pageSize * (current - 1)); }, onChange: (current, pageSize) => { console.log(current, pageSize); this.props.Store.tableSize = pageSize; this.props.Store.fetchTable(pageSize, pageSize * (current - 1)); } }} rowKey={"id"} columns={[ { title: "用户名", dataIndex: "user", key: "user", fixed: "left", width: 210 }, { title: "历史记录", dataIndex: "history", key: "history", width: 100, align: "center", fixed: "right", render: (text, record) => ( ) }, { title: "详细信息", dataIndex: "auth", key: "auth", width: 100, align: "center", fixed: "right", render: (text, record) => ( ) } ]} loading={this.props.Store.tableLoading} dataSource={this.props.Store.tableConverter} rowSelection={rowSelection} scroll={ { x: 1690 }} />

操作与列表在不同组件,所以将他存储到Store中,利用this.props.Store.selection.keys进行操作,在此修改这个值
这是操作的成功后清空this.props.Store.selection.keys的值:

if (Http.protocol(data, "SUCCESS")) {
                message.info(data.head.message);
                console.log('选择操作的成功数量' + JSON.stringify(this.props.Store.selection.keys))
                this.props.Store.selection.keys = [];
                this.props.Store.selection.rows = [];
                this.props.Store.fetchTable();//重新刷新列表
                alert('刷新列表后的数据' + JSON.stringify(this.props.Store.selection.keys))
              } else {
                message.warning(data.head.message);
              }

但是未果,修改后,页面还是现实打钩,但实际没有值了

我一直以为react只有setState了才可以更新,但是不是的,当数据更新后,也会触发onChange事件,会重新渲染
最后解决了:
把渲染的时候使用的rowSelection ,直接把值写成Store的值,就可以了,具体的代码如下:

onSelectChange = (selectedRowKeys, selectedRows) => {
        this.props.Store.selection.rows = selectedRows;
        this.props.Store.selection.keys = selectedRowKeys;
    };

render() {
    const rowSelection = {
      selectedRowKeys: this.props.Store.selection.keys,
      onChange: this.onSelectChange,
    };
    return (
      
{ console.log(current, pageSize); this.props.Store.tableSize = pageSize; this.props.Store.fetchTable(pageSize, pageSize * (current - 1)); }, onChange: (current, pageSize) => { console.log(current, pageSize); this.props.Store.tableSize = pageSize; this.props.Store.fetchTable(pageSize, pageSize * (current - 1)); } }} rowKey={"id"} columns={[ { title: "用户名", dataIndex: "user", key: "user", fixed: "left", width: 210 }, { title: "历史记录", dataIndex: "history", key: "history", width: 100, align: "center", fixed: "right", render: (text, record) => ( ) }, { title: "详细信息", dataIndex: "auth", key: "auth", width: 100, align: "center", fixed: "right", render: (text, record) => ( ) } ]} loading={this.props.Store.tableLoading} dataSource={this.props.Store.tableConverter} rowSelection={rowSelection} scroll={ { x: 1690 }} /> ); }

可以满足需求了,奈斯,谢谢帮助我的小伙伴!

如果以上解决不了你的问题,可以参考以下地址。

参考的地址:
官网:http://lucifier129.github.io/ant-design/components/table/#demo-row-selection-and-operation

https://www.cnblogs.com/hujunzheng/p/5689650.html

https://www.jianshu.com/p/733ce55740db

https://www.jb51.net/article/147331.htm

https://blog.csdn.net/Mr_yangzc/article/details/85006029

https://blog.csdn.net/hbkc5/article/details/70919985
https://github.com/ant-design/ant-design/issues/3547

你可能感兴趣的:(react,bug)