1. 問題点
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;
selectedIdsInSearchTabしかし、使ってみると、テーブルの複数ページで特定の行が選択されている場合、最終的に選択されたIDを記録する配列は正しいのですが、選択された行の内容を記録する配列が間違っていることがわかりますselectedRowsInSearchTab 。テーブルの現在のページで選択されている行は であり、他のページで選択されている行の内容は失われます。
2. 調査の流れ
調査の結果、これはフレームワークのバグであり、変更できないことが判明しました。
参考記事：
https://blog.csdn.net/yoyoyo8888/article/details/132324571
3. 解決策
複数のページで選択した行のデータが実際に必要であり、ID だけでは十分ではないため、テーブルに 2 つのボタンを追加しました。
1. このように、ユーザーはまず現在のページのデータを選択し、次に [追加] ボタンをクリックして、現在のページの選択した行を自分で用意した配列に追加できます。
2. ユーザーはページをめくり、データを再度選択し、[追加] ボタンを再度クリックして、現在のページで選択した行を準備した配列に追加します。
3. アレイは重複排除する必要があり、繰り返し選択できないことに注意してください。
4. 空の配列テストに注意してください。
5. 間違った選択をした場合は、最初にクリア ボタンをクリックしてから再度選択する必要があります。
4. 備考
1. 残る問題は、ユーザーが複数ページのデータを選択して追加ボタンをクリックすると、現在のページのデータのみがユーザーが用意した配列に追加され、前のページで選択したデータは追加されないことです。 。
2. 後で最適化することができます。ID が完成しているため、ID を使用してバックグラウンド インターフェイスにクエリを実行し、各行の内容を取得して、それを配列に追加できます。(各行に他のコンテンツを含めずに、ID のみで十分になるように最適化することをお勧めします)