Defining the ref callback as a bound method

packages/common/editors/SimpleTextEditor.js

@@ -3,9 +3,12 @@ const EditorBase              = require('./EditorBase');
 
 
 class SimpleTextEditor extends EditorBase {
+  setInputRef = (input) => {
+    this.input = input;
+  };
 
   render() {
-    return (<input ref={(node) => this.input = node} type="text" onBlur={this.props.onBlur} className="form-control" defaultValue={this.props.value} />);
+    return (<input ref={this.setInputRef} type="text" onBlur={this.props.onBlur} className="form-control" defaultValue={this.props.value} />);
   }
 }
 

packages/react-data-grid-addons/src/__tests__/Grid.spec.js

@@ -191,10 +191,8 @@ describe('Grid', function() {
       });
 
       it('should set filter state of grid and render a filterable header row', function() {
-        let filterableHeaderRow = this.baseGrid.props.headerRows[1];
         expect(this.component.state.canFilter).toBe(true);
         expect(this.baseGrid.props.headerRows.length).toEqual(2);
-        expect(typeof filterableHeaderRow.ref).toEqual('function');
       });
     });
   });

packages/react-data-grid-addons/src/editors/AutoCompleteEditor.js

@@ -95,10 +95,14 @@ class AutoCompleteEditor extends React.Component {
     return ret.join('|');
   };
 
+  setAutocompleteRef = (autoComplete) => {
+    this.autoComplete = autoComplete;
+  };
+
   render() {
     let label = this.props.label != null ? this.props.label : 'title';
     return (<div height={this.props.height} onKeyDown={this.props.onKeyDown}>
-      <ReactAutocomplete search={this.props.search} ref={(node) => this.autoComplete = node} label={label} onChange={this.handleChange} onFocus={this.props.onFocus} resultIdentifier={this.props.resultIdentifier} options={this.props.options} value={this.getEditorDisplayValue()} />
+      <ReactAutocomplete search={this.props.search} ref={this.setAutocompleteRef} label={label} onChange={this.handleChange} onFocus={this.props.onFocus} resultIdentifier={this.props.resultIdentifier} options={this.props.options} value={this.getEditorDisplayValue()} />
       </div>);
   }
 }

packages/react-data-grid/src/Grid.js

@@ -133,9 +133,17 @@ class Grid extends React.Component {
     this.viewport = viewport;
   };
 
+  setViewportContainerRef = (viewportContainer) => {
+    this.viewPortContainer = viewportContainer;
+  };
+
+  setEmptyViewRef = (emptyView) => {
+    this.emptyView = emptyView;
+  };
+
   render() {
-    let headerRows = this.props.headerRows || [{ref: (node) => this.row = node}];
-    let EmptyRowsView = this.props.emptyRowsView;
+    const { headerRows } = this.props;
+    const EmptyRowsView = this.props.emptyRowsView;
 
     return (
       <div style={this.getStyle()} className="react-grid-Grid">
@@ -151,13 +159,12 @@ class Grid extends React.Component {
           draggableHeaderCell={this.props.draggableHeaderCell}
           onSort={this.props.onSort}
           onHeaderDrop={this.props.onHeaderDrop}
-          // onScroll={this.onHeaderScroll}
           getValidFilterValues={this.props.getValidFilterValues}
           cellMetaData={this.props.cellMetaData}
           />
           {this.props.rowsCount >= 1 || (this.props.rowsCount === 0 && !this.props.emptyRowsView) ?
             <div
-              ref={(node) => { this.viewPortContainer = node; } }
+              ref={this.setViewportContainerRef}
               onKeyDown={this.props.onViewportKeydown}
               onKeyUp={this.props.onViewportKeyup}
               >
@@ -204,7 +211,7 @@ class Grid extends React.Component {
                 />
             </div>
         :
-            <div ref={(node) => { this.emptyView = node; } } className="react-grid-Empty">
+            <div ref={this.setEmptyViewRef} className="react-grid-Empty">
                 <EmptyRowsView />
             </div>
         }

packages/react-data-grid/src/Header.js

@@ -78,22 +78,25 @@ class Header extends React.Component {
     }
   };
 
+  setRowRef = (row) => {
+    this.row = row;
+  };
+
+  setFilterRowRef = (filterRow) => {
+    this.filterRow = filterRow;
+  };
+
   getHeaderRows = () => {
-    let columnMetrics = this.getColumnMetrics();
-    let resizeColumn;
-    if (this.state.resizing) {
-      resizeColumn = this.state.resizing.column;
-    }
-    let headerRows = [];
-    this.props.headerRows.forEach((row, index) => {
+    const columnMetrics = this.getColumnMetrics();
+    const resizeColumn = this.state.resizing ? this.state.resizing.column : undefined;
+
+    return this.props.headerRows.map((row, index) => {
       // To allow header filters to be visible
-      let rowHeight = 'auto';
-      if (row.rowType === HeaderRowType.FILTER) {
-        rowHeight = '500px';
-      }
-      let scrollbarSize = getScrollbarSize() > 0 ? getScrollbarSize() : 0;
-      let updatedWidth = isNaN(this.props.totalWidth - scrollbarSize) ? this.props.totalWidth : this.props.totalWidth - scrollbarSize;
-      let headerRowStyle = {
+      const isFilterRow = row.rowType === HeaderRowType.FILTER;
+      const rowHeight = isFilterRow ? '500px' : 'auto';
+      const scrollbarSize = getScrollbarSize() > 0 ? getScrollbarSize() : 0;
+      const updatedWidth = isNaN(this.props.totalWidth - scrollbarSize) ? this.props.totalWidth : this.props.totalWidth - scrollbarSize;
+      const headerRowStyle = {
         position: 'absolute',
         top: this.getCombinedHeaderHeights(index),
         left: 0,
@@ -102,29 +105,30 @@ class Header extends React.Component {
         minHeight: rowHeight
       };
 
-      headerRows.push(<HeaderRow
-        key={row.ref}
-        ref={(node) => { return row.rowType === HeaderRowType.FILTER ? this.filterRow = node : this.row = node; }}
-        rowType={row.rowType}
-        style={headerRowStyle}
-        onColumnResize={this.onColumnResize}
-        onColumnResizeEnd={this.onColumnResizeEnd}
-        width={columnMetrics.width}
-        height={row.height || this.props.height}
-        columns={columnMetrics.columns}
-        resizing={resizeColumn}
-        draggableHeaderCell={this.props.draggableHeaderCell}
-        filterable={row.filterable}
-        onFilterChange={row.onFilterChange}
-        onHeaderDrop={this.props.onHeaderDrop}
-        sortColumn={this.props.sortColumn}
-        sortDirection={this.props.sortDirection}
-        onSort={this.props.onSort}
-        onScroll={this.props.onScroll}
-        getValidFilterValues={this.props.getValidFilterValues}
-        />);
+      return (
+        <HeaderRow
+          key={row.rowType}
+          ref={isFilterRow ? this.setFilterRowRef : this.setRowRef}
+          rowType={row.rowType}
+          style={headerRowStyle}
+          onColumnResize={this.onColumnResize}
+          onColumnResizeEnd={this.onColumnResizeEnd}
+          width={columnMetrics.width}
+          height={row.height || this.props.height}
+          columns={columnMetrics.columns}
+          resizing={resizeColumn}
+          draggableHeaderCell={this.props.draggableHeaderCell}
+          filterable={row.filterable}
+          onFilterChange={row.onFilterChange}
+          onHeaderDrop={this.props.onHeaderDrop}
+          sortColumn={this.props.sortColumn}
+          sortDirection={this.props.sortDirection}
+          onSort={this.props.onSort}
+          onScroll={this.props.onScroll}
+          getValidFilterValues={this.props.getValidFilterValues}
+        />
+      );
     });
-    return headerRows;
   };
 
   getColumnMetrics = () => {

packages/react-data-grid/src/ReactDataGrid.js

@@ -558,10 +558,9 @@ class ReactDataGrid extends React.Component {
   };
 
   getHeaderRows = () => {
-    let rows = [{ ref: (node) => this.row = node, height: this.props.headerRowHeight || this.props.rowHeight, rowType: HeaderRowType.HEADER }];
+    const rows = [{ height: this.props.headerRowHeight || this.props.rowHeight, rowType: HeaderRowType.HEADER }];
     if (this.state.canFilter === true) {
       rows.push({
-        ref: (node) => this.filterRow = node,
         filterable: true,
         onFilterChange: this.props.onAddFilter,
         height: this.props.headerFiltersHeight,
@@ -646,6 +645,10 @@ class ReactDataGrid extends React.Component {
     this.grid = grid;
   };
 
+  setBaseGridRef = (base) => {
+    this.base = base;
+  };
+
   renderToolbar = () => {
     let Toolbar = this.props.toolbar;
     let toolBarProps =  {columns: this.props.columns, onToggleFilter: this.onToggleFilter, numberOfRows: this.props.rowsCount};
@@ -694,7 +697,7 @@ class ReactDataGrid extends React.Component {
         {toolbar}
         <div className="react-grid-Main">
           <BaseGrid
-            ref={(node) => this.base = node}
+            ref={this.setBaseGridRef}
             {...this.props}
             rowKey={this.props.rowKey}
             headerRows={this.getHeaderRows()}