update react refs to use callbacks instead of strings;

move saveRef to utils and use anywhere we want to save a ref;

Author: coderpawz

src/DropdownMenu.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import toArray from 'rc-util/lib/Children/toArray';
 import Menu from 'rc-menu';
 import scrollIntoView from 'dom-scroll-into-view';
-import { getSelectKeys, preventDefaultEvent } from './util';
+import { getSelectKeys, preventDefaultEvent, saveRef } from './util';
 
 export default class DropdownMenu extends React.Component {
   static propTypes= {
@@ -21,6 +21,11 @@ export default class DropdownMenu extends React.Component {
     visible: PropTypes.bool,
   }
 
+  constructor(props) {
+    super(props);
+    this.saveMenuRef = saveRef.bind(this, 'menuInstance');
+  }
+
   componentWillMount() {
     this.lastInputValue = this.props.inputValue;
   }
@@ -60,7 +65,7 @@ export default class DropdownMenu extends React.Component {
         scrollIntoViewOpts.alignWithTop = true;
       }
 
-      scrollIntoView(itemComponent, findDOMNode(this.refs.menu), scrollIntoViewOpts);
+      scrollIntoView(itemComponent, findDOMNode(this.menuInstance), scrollIntoViewOpts);
     }
   }
 
@@ -121,7 +126,7 @@ export default class DropdownMenu extends React.Component {
       }
 
       return (<Menu
-        ref="menu"
+        ref={this.saveMenuRef}
         style={this.props.dropdownMenuStyle}
         defaultActiveFirst={defaultActiveFirstOption}
         {...activeKeyProps}

src/Select.jsx

@@ -11,7 +11,7 @@ import {
   UNSELECTABLE_ATTRIBUTE, UNSELECTABLE_STYLE,
   preventDefaultEvent, findFirstMenuItem,
   includesSeparators, splitBySeparators,
-  findIndexInValueByLabel, defaultFilterFn,
+  findIndexInValueByLabel, defaultFilterFn, saveRef,
 } from './util';
 import SelectTrigger from './SelectTrigger';
 import { SelectPropTypes } from './PropTypes';
@@ -21,10 +21,6 @@ import warning from 'warning';
 function noop() {
 }
 
-function saveRef(name, component) {
-  this[name] = component;
-}
-
 function chaining(...fns) {
   return function (...args) {  // eslint-disable-line
     for (let i = 0; i < fns.length; i++) {
@@ -78,6 +74,9 @@ constructor(props) {
   }
   this.saveInputRef = saveRef.bind(this, 'inputInstance');
   this.saveInputMirrorRef = saveRef.bind(this, 'inputMirrorInstance');
+  this.saveRootRef = saveRef.bind(this, 'rootInstance');
+  this.saveSelectionRef = saveRef.bind(this, 'selectionInstance');
+  this.saveTriggerRef = saveRef.bind(this, 'triggerInstance');
   let open = props.open;
   if (open === undefined) {
     open = props.defaultOpen;
@@ -216,7 +215,7 @@ constructor(props) {
     }
 
     if (state.open) {
-      const menu = this.refs.trigger.getInnerMenu();
+      const menu = this.triggerInstance.getInnerMenu();
       if (menu && menu.onKeyDown(event)) {
         event.preventDefault();
         event.stopPropagation();
@@ -362,7 +361,7 @@ constructor(props) {
   }
 
   onChoiceAnimationLeave =() => {
-    this.refs.trigger.refs.trigger.forcePopupAlign();
+    this.triggerInstance.triggerInstance.forcePopupAlign();
   }
 
   getLabelBySingleValue = (children, value) => {
@@ -505,11 +504,11 @@ constructor(props) {
   }
 
   getPopupDOMNode=() => {
-    return this.refs.trigger.getPopupDOMNode();
+    return this.triggerInstance.getPopupDOMNode();
   }
 
   getPopupMenuComponent=() => {
-    return this.refs.trigger.getInnerMenu();
+    return this.triggerInstance.getInnerMenu();
   }
 
   setOpenState = (open, needFocus) => {
@@ -600,12 +599,12 @@ constructor(props) {
   }
 
   updateFocusClassName = () => {
-    const { refs, props } = this;
+    const { rootInstance, props } = this;
     // avoid setState and its side effect
     if (this._focused) {
-      classes(refs.root).add(`${props.prefixCls}-focused`);
+      classes(rootInstance).add(`${props.prefixCls}-focused`);
     } else {
-      classes(refs.root).remove(`${props.prefixCls}-focused`);
+      classes(rootInstance).remove(`${props.prefixCls}-focused`);
     }
   }
 
@@ -619,7 +618,7 @@ constructor(props) {
           this._focused = true;
         }
       } else {
-        const selection = this.refs.selection;
+        const selection = this.selectionInstance;
         if (activeElement !== selection) {
           selection.focus();
           this._focused = true;
@@ -1036,17 +1035,17 @@ constructor(props) {
         getPopupContainer={props.getPopupContainer}
         onMenuSelect={this.onMenuSelect}
         onMenuDeselect={this.onMenuDeselect}
-        ref="trigger"
+        ref={this.saveTriggerRef}
       >
         <div
           style={props.style}
-          ref="root"
+          ref={this.saveRootRef}
           onBlur={this.onOuterBlur}
           onFocus={this.onOuterFocus}
           className={classnames(rootCls)}
         >
           <div
-            ref="selection"
+            ref={this.saveSelectionRef}
             key="selection"
             className={`${prefixCls}-selection
             ${prefixCls}-selection--${multiple ? 'multiple' : 'single'}`}

src/SelectTrigger.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import DropdownMenu from './DropdownMenu';
 import ReactDOM from 'react-dom';
-import { isSingleMode } from './util';
+import { isSingleMode, saveRef } from './util';
 
 Trigger.displayName = 'Trigger';
 
@@ -45,6 +45,13 @@ export default class SelectTrigger extends React.Component {
     children: PropTypes.any,
   }
 
+  constructor(props) {
+    super(props);
+
+    this.saveMenuRef = saveRef.bind(this, 'popupMenu');
+    this.saveTriggerRef = saveRef.bind(this, 'triggerInstance');
+  }
+
   componentDidUpdate() {
     const { visible, dropdownMatchSelectWidth } = this.props;
     if (visible) {
@@ -57,17 +64,17 @@ export default class SelectTrigger extends React.Component {
   }
 
   getInnerMenu = () => {
-    return this.popupMenu && this.popupMenu.refs.menu;
+    return this.popupMenu && this.popupMenu.menuInstance;
   }
 
   getPopupDOMNode = () => {
-    return this.refs.trigger.getPopupDomNode();
+    return this.triggerInstance.getPopupDomNode();
   }
 
   getDropdownElement = (newProps) => {
     const props = this.props;
     return (<DropdownMenu
-      ref={this.saveMenu}
+      ref={this.saveMenuRef}
       {...newProps}
       prefixCls={this.getDropdownPrefixCls()}
       onMenuSelect={props.onMenuSelect}
@@ -92,10 +99,6 @@ export default class SelectTrigger extends React.Component {
     return `${this.props.prefixCls}-dropdown`;
   }
 
-  saveMenu = (menu) => {
-    this.popupMenu = menu;
-  }
-
   render() {
     const { onPopupFocus, ...props } = this.props;
     const { multiple, visible, inputValue, dropdownAlign,
@@ -123,7 +126,7 @@ export default class SelectTrigger extends React.Component {
     return (<Trigger {...props}
       showAction={disabled ? [] : ['click']}
       hideAction={hideAction}
-      ref="trigger"
+      ref={this.saveTriggerRef}
       popupPlacement="bottomLeft"
       builtinPlacements={BUILT_IN_PLACEMENTS}
       prefixCls={dropdownPrefixCls}

src/util.js

@@ -141,3 +141,7 @@ export function splitBySeparators(string, separators) {
 export function defaultFilterFn(input, child) {
   return String(getPropValue(child, this.props.optionFilterProp)).indexOf(input) > -1;
 }
+
+export function saveRef(name, component) {
+  this[name] = component;
+}

tests/util.spec.js

@@ -4,6 +4,7 @@ import {
   splitBySeparators,
   getValuePropValue,
   defaultFilterFn,
+  saveRef,
 } from '../src/util';
 
 describe('includesSeparators', () => {
@@ -94,3 +95,14 @@ describe('defaultFilterFn', () => {
     expect(defaultFilterFn.call(testerInstance, 'wrong-val', child)).toBe(false);
   });
 });
+
+describe('saveRef', () => {
+  const mock = {};
+  const saveTestRef = saveRef.bind(mock, 'testInstance');
+
+  it('adds a property with the given name to context', () => {
+    expect(mock.testInstance).toBe(undefined);
+    saveTestRef('bar');
+    expect(mock.testInstance).toBe('bar');
+  });
+});