Reactjs Ant Design-单击分页按钮折叠展开的行

我在ant设计表（）上实现了可扩展行特性，正如ant设计网站上所述，它工作得非常好。但是我想扩展表的功能，包括当用户单击表右下角允许分页的按钮时折叠行。这是一个相当直截了当的问题，所以我不会因为发布代码而把它弄得乱七八糟。任何帮助或链接将不胜感激

编辑代码段

import * as React from 'react';
import { Tooltip, Table } from 'antd';
import * as IAssignmentsResponse from '../../interfaces/QC/IAssignmentResponse';
import * as moment from 'moment';


     const expandedRowRender = (rowData) => {
        const columns = [
            { title: 'Row1', dataIndex: 'Row1DataIndex', key: '1'},
            { title: 'Row2', dataIndex: 'Row2DataIndex', key: '2'},
            { title: 'Row3', dataIndex: 'Row3DataIndex', key: '3'},
        ];

        return <Table
            columns={columns}
            dataSource={rowData.DataArray}
            pagination={false}>
        </Table>
    }

    const bindRows = (row) => {
        return row.Workitem.WorkflowRefID;
    }

    const columns = [
        {
            title: 'MasterRow1',
            dataIndex: 'MasterRow1DataIndex',
            key: '1',
            render(value) { return value.WorkflowRefID; },
            onFilter: (value, record) => record.Workitem.data1.indexOf(value) === 0,
            sorter: (a, b) => a.Workitem.data1 - b.Workitem.data1
        },
        {
            title: 'MasterRow2',
            dataIndex: 'MasterRow1DataIndex',
            key: '2',
            render(value, record) { return <Tooltip title={record.data2} mouseEnterDelay={.5}>{value}</Tooltip> },
            onFilter: (value, record) => record.data2.indexOf(value) === 0,
            sorter: (a, b) => a.data2- b.data2
        },
        {
            title: 'MasterRow3',
            dataIndex: 'MasterRow1DataIndex',
            key: '3',
            render(value, record) { return <Tooltip title={record.data3} mouseEnterDelay={.5}>{value}</Tooltip> },
            onFilter: (value, record) => record.data3.indexOf(value) === 0,
            sorter: (a, b) => a.data3- b.data3
        }
    ]

    return <Table rowKey={record => bindRows(record)}
        columns={columns}
        dataSource={this.props.assignmentData.AssignmentsResponse.Assignment}
        expandedRowRender={record => expandedRowRender(record)}
        onExpand={this.onTableRowExpand}
        />

import*as React from'React'；
从“antd”导入{Tooltip，Table}；
从“../../interfaces/QC/IAssignmentResponse”导入*作为IAssignmentsResponse；
从“时刻”导入*作为时刻；
常量expandedRowRender=（行数据）=>{
常量列=[
{title:'Row1'，dataIndex:'Row1DataIndex'，key:'1'}，
{title:'Row2'，dataIndex:'Row2DataIndex'，key:'2'}，
{title:'Row3'，dataIndex:'Row3DataIndex'，key:'3'}，
];
返回
}
常量bindRows=（行）=>{
返回row.Workitem.WorkflowRefID；
}
常量列=[
{
标题：“MasterRow1”，
dataIndex:“MasterRow1DataIndex”，
键：“1”，
render（value）{return value.WorkflowRefID；}，
onFilter：（值，记录）=>record.Workitem.data1.indexOf（值）==0，
分拣机：（a，b）=>a.Workitem.data1-b.Workitem.data1
},
{
标题：“MasterRow2”，
dataIndex:“MasterRow1DataIndex”，
键：“2”，
呈现（值，记录）{return{value}}，
onFilter：（值，记录）=>record.data2.indexOf（值）==0，
分拣机：（a，b）=>a.data2-b.data2
},
{
标题：“MasterRow3”，
dataIndex:“MasterRow1DataIndex”，
键：“3”，
呈现（值，记录）{return{value}}，
onFilter：（值，记录）=>record.data3.indexOf（值）==0，
分拣机：（a，b）=>a.data3-b.data3
}
]
返回bindRows（记录）}
列={columns}
dataSource={this.props.assignmentData.AssignmentsResponse.Assignment}
expandedRowRender={record=>expandedRowRender（record）}
onExpand={this.onTableRowExpand}
/>

您可以使用Ant Design的

表

组件API的

expandedRowKeys

方法实现这一点，该API是已展开行的键列表。空列表表示所有行都已折叠

您可以使用

onChange

方法捕获分页按钮单击，该方法可用于调用设置组件状态的函数：

class MyTable extends Component {
  constructor(props) {
    super(props);
    this.state = { currentPage: 1, expandedRows: [] };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(pagination) {
    // changes the page, collapses all rows
    this.setState({ currentPage: pagination.current, expandedRows: [] });
  }

  handleRowExpand(record) {
    // if a row is expanded, collapses it, otherwise expands it
    this.setState(prevState =>
      prevState.expandedRows.includes(record.key)
        ? {
            expandedRows: prevState.expandedRows.filter(
              key => key !== record.key
            )
          }
        : { expandedRows: [...prevState.expandedRows, record.key] }
    );
  }

  render() {
    return (
      <Table
        dataSource={YOUR_DATA}
        ...OTHER_PROPS
        pagination={{ current: this.state.currentPage }}

        // pagination buttons clicked
        onChange={this.handleChange}

        // expand + icon clicked
        onExpand={(expanded, record) => this.handleRowExpand(record)}

        // tell the 'Table' component which rows are expanded
        expandedRowKeys={this.state.expandedRows}
      />
    );
  }
}

类MyTable扩展组件{
建造师（道具）{
超级（道具）；
this.state={currentPage:1，expandedRows:[]}；
this.handleChange=this.handleChange.bind（this）；
}
手册更改（分页）{
//更改页面，折叠所有行
this.setState（{currentPage:pagination.current，expandedRows:[]}）；
}
handleRowExpand（记录）{
//如果一行展开，则折叠该行，否则展开该行
this.setState（prevState=>
prevState.expandedRows.includes（record.key）
? {
expandedRows:prevState.expandedRows.filter(
key=>key！==record.key
)
}
：{expandedRows:[…prevState.expandedRows，record.key]}
);
}
render（）{
返回(
this.handleRowExpand（记录）}
//告诉“表”组件展开了哪些行
expandedRowKeys={this.state.expandedRows}
/>
);
}
}

“这是一个相当直截了当的问题，所以我不会因为发布代码而把它弄得乱七八糟。”StackOverflow不是一个代码编写服务，因此，如果您包含迄今为止尝试过的代码，以便更容易地帮助您解决您所面临的问题，那将是一件非常棒的事情。它实际上是从设计网站复制和粘贴的，只需更改一些变量名，没有什么特别之处。当我回到我的电脑，我可以张贴它，如果它有帮助。