Skip to content

Commit 7c18851

Browse files
AllenFangAllenFang
committed
fix #1663 
1 parent ea7bc58 commit 7c18851

File tree

14 files changed

+114
-114
lines changed

14 files changed

+114
-114
lines changed

‎src/BootstrapTable.js‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ class BootstrapTable extends Component {
230230
reset() {
231231
const { pageStartIndex } = this.props.options;
232232
this.store.clean();
233-
this.refs.body.setState({ currEditCell: null });
233+
this.body.setState({ currEditCell: null });
234234
this.setState(() => {
235235
return {
236236
data: this.getTableData(),
@@ -354,9 +354,9 @@ class BootstrapTable extends Component {
354354
componentDidMount() {
355355
this._adjustTable();
356356
window.addEventListener('resize', this._adjustTable);
357-
this.refs.body.refs.container.addEventListener('scroll', this._scrollHeader);
357+
this.body.container.addEventListener('scroll', this._scrollHeader);
358358
if (this.props.footer) {
359-
this.refs.body.refs.container.addEventListener('scroll', this._scrollFooter);
359+
this.body.container.addEventListener('scroll', this._scrollFooter);
360360
}
361361
if (this.props.scrollTop) {
362362
this._scrollTop();
@@ -365,10 +365,10 @@ class BootstrapTable extends Component {
365365

366366
componentWillUnmount() {
367367
window.removeEventListener('resize', this._adjustTable);
368-
if (this.refs && this.refs.body && this.refs.body.refs) {
369-
this.refs.body.refs.container.removeEventListener('scroll', this._scrollHeader);
368+
if (this.body && this.body.container) {
369+
this.body.container.removeEventListener('scroll', this._scrollHeader);
370370
if (this.props.footer) {
371-
this.refs.body.refs.container.removeEventListener('scroll', this._scrollFooter);
371+
this.body.container.removeEventListener('scroll', this._scrollFooter);
372372
}
373373
}
374374
if (this.filter) {
@@ -451,13 +451,13 @@ class BootstrapTable extends Component {
451451
style={ this.props.containerStyle }>
452452
{ showToolbarOnTop ? toolBar : null }
453453
{ showPaginationOnTop ? pagination : null }
454-
<div ref='table'
454+
<div ref={ node => this.table = node }
455455
className={ classSet('react-bs-table', { 'react-bs-table-bordered': this.props.bordered }, this.props.tableContainerClass) }
456456
style={ { ...style, ...this.props.tableStyle } }
457457
onMouseEnter={ this.handleMouseEnter }
458458
onMouseLeave={ this.handleMouseLeave }>
459459
<TableHeader
460-
ref='header'
460+
ref={ node => this.header = node }
461461
version={ this.props.version }
462462
colGroups={ colGroups }
463463
headerContainerClass={ this.props.headerContainerClass }
@@ -480,7 +480,8 @@ class BootstrapTable extends Component {
480480
expandColumnBeforeSelectColumn={ expandColumnOptions.expandColumnBeforeSelectColumn }>
481481
{ this.props.children }
482482
</TableHeader>
483-
<TableBody ref='body'
483+
<TableBody
484+
ref={ node => this.body = node }
484485
bodyContainerClass={ this.props.bodyContainerClass }
485486
tableBodyClass={ this.props.tableBodyClass }
486487
style={ { ...style, ...this.props.bodyStyle } }
@@ -684,7 +685,7 @@ class BootstrapTable extends Component {
684685

685686
if (y >= visibleRowSize) {
686687
currPage++;
687-
const lastPage = pagination ? this.refs.pagination.getLastPage() : -1;
688+
const lastPage = pagination ? this.pagination.getLastPage() : -1;
688689
if (currPage <= lastPage) {
689690
this.handlePaginationData(currPage, this.state.sizePerPage);
690691
} else {
@@ -702,7 +703,7 @@ class BootstrapTable extends Component {
702703
} else if (x >= visibleColumnSize) {
703704
if ((y + 1) === visibleRowSize) {
704705
currPage++;
705-
const lastPage = pagination ? this.refs.pagination.getLastPage() : -1;
706+
const lastPage = pagination ? this.pagination.getLastPage() : -1;
706707
if (currPage <= lastPage) {
707708
this.handlePaginationData(currPage, this.state.sizePerPage);
708709
} else {
@@ -880,7 +881,7 @@ class BootstrapTable extends Component {
880881

881882
if (beforeSaveCell) {
882883
const beforeSaveCellCB = result => {
883-
this.refs.body.cancelEditCell();
884+
this.body.cancelEditCell();
884885
if (result || result === undefined) {
885886
this.editCell(newVal, rowIndex, colIndex);
886887
} else {
@@ -944,7 +945,7 @@ class BootstrapTable extends Component {
944945

945946
const afterHandleAddRow = errMsg => {
946947
if (isAsync) {
947-
this.refs.toolbar.afterHandleSaveBtnClick(errMsg);
948+
this.toolbar.afterHandleSaveBtnClick(errMsg);
948949
} else {
949950
return errMsg;
950951
}
@@ -1164,8 +1165,8 @@ class BootstrapTable extends Component {
11641165
handleSearch = searchText => {
11651166
// Set search field if this function being called outside
11661167
// but it's not necessary if calling fron inside.
1167-
if (this.refs.toolbar) {
1168-
this.refs.toolbar.setSearchInput(searchText);
1168+
if (this.toolbar) {
1169+
this.toolbar.setSearchInput(searchText);
11691170
}
11701171
const { autoCollapse: { search } } = this.props;
11711172
const { onSearchChange, pageStartIndex } = this.props.options;
@@ -1233,7 +1234,7 @@ class BootstrapTable extends Component {
12331234
return (
12341235
<div className='react-bs-table-pagination'>
12351236
<PaginationList
1236-
ref='pagination'
1237+
ref={ node => this.pagination = node }
12371238
withFirstAndLast={ withFirstAndLast }
12381239
alwaysShowAllBtns={ options.alwaysShowAllBtns }
12391240
currPage={ this.state.currPage }
@@ -1313,7 +1314,7 @@ class BootstrapTable extends Component {
13131314
return (
13141315
<div className={ `react-bs-table-tool-bar ${ print ? '' : 'hidden-print' }` }>
13151316
<ToolBar
1316-
ref='toolbar'
1317+
ref={ node => this.toolbar = node }
13171318
version={ this.props.version }
13181319
defaultSearch={ this.props.options.defaultSearch }
13191320
clearSearch={ this.props.options.clearSearch }
@@ -1382,7 +1383,7 @@ class BootstrapTable extends Component {
13821383
}
13831384
return (
13841385
<TableFooter
1385-
ref='footer'
1386+
ref={ node => this.footer = node }
13861387
columns={ columns }
13871388
colGroups={ colGroups }
13881389
footerFormatterReturnData={ footerFormatterReturnData }
@@ -1404,20 +1405,20 @@ class BootstrapTable extends Component {
14041405
_scrollTop = () => {
14051406
const { scrollTop } = this.props;
14061407
if (scrollTop === Const.SCROLL_TOP) {
1407-
this.refs.body.refs.container.scrollTop = 0;
1408+
this.body.container.scrollTop = 0;
14081409
} else if (scrollTop === Const.SCROLL_BOTTOM) {
1409-
this.refs.body.refs.container.scrollTop = this.refs.body.refs.container.scrollHeight;
1410+
this.body.container.scrollTop = this.body.container.scrollHeight;
14101411
} else if (typeof scrollTop === 'number' && !isNaN(scrollTop)) {
1411-
this.refs.body.refs.container.scrollTop = scrollTop;
1412+
this.body.container.scrollTop = scrollTop;
14121413
}
14131414
}
14141415
_scrollHeader = (e) => {
1415-
this.refs.header.refs.container.scrollLeft = e.currentTarget.scrollLeft;
1416+
this.header.container.scrollLeft = e.currentTarget.scrollLeft;
14161417
}
14171418

14181419
_scrollFooter = (e) => {
14191420
if (this.props.footer) {
1420-
this.refs.footer.refs.container.scrollLeft = e.currentTarget.scrollLeft;
1421+
this.footer.container.scrollLeft = e.currentTarget.scrollLeft;
14211422
}
14221423
}
14231424

@@ -1429,9 +1430,9 @@ class BootstrapTable extends Component {
14291430
}
14301431

14311432
_adjustHeaderWidth() {
1432-
const header = this.refs.header.getHeaderColGrouop();
1433-
const tbody = this.refs.body.refs.tbody;
1434-
const bodyHeader = this.refs.body.getHeaderColGrouop();
1433+
const header = this.header.getHeaderColGrouop();
1434+
const tbody = this.body.tbody;
1435+
const bodyHeader = this.body.getHeaderColGrouop();
14351436
const firstRow = tbody.childNodes[0];
14361437
const isScroll = tbody.parentNode.getBoundingClientRect().height >
14371438
tbody.parentNode.parentNode.getBoundingClientRect().height;
@@ -1490,16 +1491,16 @@ class BootstrapTable extends Component {
14901491
const { height } = this.props;
14911492
let { maxHeight } = this.props;
14921493
if ((typeof height === 'number' && !isNaN(height)) || height.indexOf('%') === -1) {
1493-
this.refs.body.refs.container.style.height =
1494-
parseFloat(height, 10) - this.refs.header.refs.container.offsetHeight + 'px';
1494+
this.body.container.style.height =
1495+
parseFloat(height, 10) - this.header.container.offsetHeight + 'px';
14951496
}
14961497
if (maxHeight) {
14971498
maxHeight = typeof maxHeight === 'number' ?
14981499
maxHeight :
14991500
parseInt(maxHeight.replace('px', ''), 10);
15001501

1501-
this.refs.body.refs.container.style.maxHeight =
1502-
maxHeight - this.refs.header.refs.container.offsetHeight + 'px';
1502+
this.body.container.style.maxHeight =
1503+
maxHeight - this.header.container.offsetHeight + 'px';
15031504
}
15041505
}
15051506

‎src/TableBody.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -236,12 +236,13 @@ class TableBody extends Component {
236236
}
237237

238238
return (
239-
<div ref='container'
239+
<div
240+
ref={ node => this.container = node }
240241
className={ classSet('react-bs-container-body', this.props.bodyContainerClass) }
241242
style={ this.props.style }>
242243
<table className={ tableClasses }>
243-
{ React.cloneElement(tableHeader, { ref: 'header' }) }
244-
<tbody ref='tbody'>
244+
{ React.cloneElement(tableHeader, { ref: node => this.header = node }) }
245+
<tbody ref={ node => this.tbody = node }>
245246
{ tableRows }
246247
</tbody>
247248
</table>
@@ -521,7 +522,7 @@ class TableBody extends Component {
521522
}
522523

523524
getHeaderColGrouop = () => {
524-
return this.refs.header.childNodes;
525+
return this.header.childNodes;
525526
}
526527
}
527528
TableBody.propTypes = {

‎src/TableEditColumn.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ class TableEditColumn extends Component {
245245
}
246246

247247
return (
248-
<td ref='td'
248+
<td
249249
{ ...attrs }
250250
style={ style }
251251
className={ className }

‎src/TableFooter.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,18 @@ class TableFooter extends Component {
1212
'table-condensed': this.props.condensed
1313
}, this.props.tableFooterClass);
1414
return (
15-
<div ref='container' className={ containerClasses } style={ this.props.style }>
15+
<div
16+
ref={ node => this.container = node }
17+
className={ containerClasses }
18+
style={ this.props.style } >
1619
{
1720
this.props.children.map((footerItem, footerItemIndex) => {
1821
return (
1922
<span key={ footerItemIndex }>
2023
<table className={ tableClasses }>
2124
{ React.cloneElement(this.props.colGroups) }
2225
<tfoot>
23-
<tr ref='footer'>
26+
<tr ref={ node => this.footer = node }>
2427
{ hideSelectColumn ? null : this.renderSelectionOrExpandCol() }
2528
{ !expandColumnVisible ? null : this.renderSelectionOrExpandCol() }
2629
{

‎src/TableHeader.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,13 @@ class TableHeader extends Component {
105105
});
106106

107107
return (
108-
<div ref='container' className={ containerClasses } style={ this.props.style }>
108+
<div
109+
ref={ node => this.container = node }
110+
className={ containerClasses }
111+
style={ this.props.style }>
109112
<table className={ tableClasses }>
110-
{ React.cloneElement(this.props.colGroups, { ref: 'headerGrp' }) }
111-
<thead ref='header'>
113+
{ React.cloneElement(this.props.colGroups, { ref: node => this.headerGrp = node }) }
114+
<thead ref={ node => this.header = node }>
112115
{ trs }
113116
</thead>
114117
</table>
@@ -117,7 +120,7 @@ class TableHeader extends Component {
117120
}
118121

119122
getHeaderColGrouop = () => {
120-
return this.refs.headerGrp.childNodes;
123+
return this.headerGrp.childNodes;
121124
}
122125

123126
renderSelectRowHeader(rowCount, rowKey) {

0 commit comments

Comments
 (0)