test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

Don't use index as row key. (#4185)

Browse Source 
* Ensure warning if key is undefined.

* Ensure getRecordKey receives index

* Remove rowKey's second parameter from doc.
This commit is contained in:
Wei Zhu 2016-12-16 17:53:08 +08:00 committed by 偏右
parent ba0dce98f5
commit d7a110552b
4 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/table/SelectionCheckboxAll.tsx
View File

@ -5,7 +5,7 @@ import { Store } from './createStore';
export interface SelectionCheckboxAllProps {
store: Store;
disabled: boolean;
getCheckboxPropsByItem: (item) => any;
getCheckboxPropsByItem: (item, index) => any;
getRecordKey: (record, index?) => string;
data: any[];
onChange: (e) => void;
@ -50,7 +50,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
if (type === 'every' || type === 'some') {
return (
byDefaultChecked
? data[type](item => getCheckboxPropsByItem(item).defaultChecked)
? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
: data[type]((item, i) =>
store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0)
);

24
components/table/Table.tsx
View File

@ -156,12 +156,12 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
});
}
getCheckboxPropsByItem = (item) => {
getCheckboxPropsByItem = (item, index) => {
const { rowSelection = {} } = this.props;
if (!rowSelection.getCheckboxProps) {
return {};
}
const key = this.getRecordKey(item);
const key = this.getRecordKey(item, index);
// Cache checkboxProps
if (!this.CheckboxPropsCache[key]) {
this.CheckboxPropsCache[key] = rowSelection.getCheckboxProps(item);
@ -175,7 +175,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
return [];
}
return this.getFlatData()
.filter(item => this.getCheckboxPropsByItem(item).defaultChecked)
.filter((item, rowIndex) => this.getCheckboxPropsByItem(item, rowIndex).defaultChecked)
.map((record, rowIndex) => this.getRecordKey(record, rowIndex));
}
@ -465,7 +465,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection();
const selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
const changableRowKeys = data
.filter(item => !this.getCheckboxPropsByItem(item).disabled)
.filter((item, i) => !this.getCheckboxPropsByItem(item, i).disabled)
.map((item, i) => this.getRecordKey(item, i));
// 记录变化的列
@ -532,7 +532,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
renderSelectionBox = (type) => {
return (_, record, index) => {
let rowIndex = this.getRecordKey(record, index); // 从 1 开始
const props = this.getCheckboxPropsByItem(record);
const props = this.getCheckboxPropsByItem(record, index);
const handleChange = (e) => {
type === 'radio' ? this.handleRadioSelect(record, rowIndex, e) :
this.handleSelect(record, rowIndex, e);
@ -553,12 +553,10 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
};
}
getRecordKey = (record, index?): string => {
getRecordKey = (record, index): string => {
const rowKey = this.props.rowKey;
if (typeof rowKey === 'function') {
return rowKey(record, index);
}
let recordKey = record[rowKey as string] !== undefined ? record[rowKey as string] : index;
const recordKey = (typeof rowKey === 'function') ?
rowKey(record, index) : record[rowKey as string];
warning(recordKey !== undefined,
'Each record in table should have a unique `key` prop, or set `rowKey` to an unique primary key.'
);
@ -569,9 +567,9 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
const { prefixCls, rowSelection } = this.props;
const columns = this.columns.concat();
if (rowSelection) {
const data = this.getFlatCurrentPageData().filter((item) => {
const data = this.getFlatCurrentPageData().filter((item, index) => {
if (rowSelection.getCheckboxProps) {
return !this.getCheckboxPropsByItem(item).disabled;
return !this.getCheckboxPropsByItem(item, index).disabled;
}
return true;
});
@ -581,7 +579,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
className: `${prefixCls}-selection-column`,
};
if (rowSelection.type !== 'radio') {
const checkboxAllDisabled = data.every(item => this.getCheckboxPropsByItem(item).disabled);
const checkboxAllDisabled = data.every((item, index) => this.getCheckboxPropsByItem(item, index).disabled);
selectionColumn.title = (
<SelectionCheckboxAll
store={this.store}

2
components/table/index.en-US.md
View File

@ -57,7 +57,7 @@ const columns = [{
| size | size of table: `default` or `small` | String | `default` |
| dataSource | data record array to be rendered | Array | |
| columns | columns of table | Array | - |
| rowKey | get row's key, could be a string or function | String or Function(record, index):string | 'key' |
| rowKey | get row's key, could be a string or function | String or Function(record):string | 'key' |
| rowClassName | get row's className | Function(record, index):string | - |
| expandedRowRender | expanded container render for each row | Function | - |
| defaultExpandedRowKeys | initial expanded row keys | Array | - |

2
components/table/index.zh-CN.md
View File

@ -58,7 +58,7 @@ const columns = [{
| size | 正常或迷你类型，`default` or `small` | String | default |
| dataSource | 数据数组 | Array | |
| columns | 表格列的配置描述，具体项见下表 | Array | - |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | String or Function(record, index):string | 'key' |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | String or Function(record):string | 'key' |
| rowClassName | 表格行的类名 | Function(record, index):string | - |
| expandedRowRender | 额外的展开行 | Function | - |
| defaultExpandedRowKeys | 默认展开的行 | Array | - |