update react refs to use callback instead of strings

for more info see the documentation at https://facebook.github.io/react/docs/refs-and-the-dom.html
react-component · Jul 26, 2017 · 74da6c4 · 74da6c4
1 parent c3780a0
commit 74da6c4
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/src/Calendar.jsx b/src/Calendar.jsx
@@ -202,6 +202,9 @@ const Calendar = createReactClass({
       showTimePicker: false,
     });
   },
+  saveDateInput(dateInput) {
+    this.dateInputInstance = dateInput;
+  },
   render() {
     const props = this.props;
     const {
@@ -227,7 +230,7 @@ const Calendar = createReactClass({
     }) : null;
     const dateInputElement = props.showDateInput ? (
       <DateInput
-        ref="dateInput"
+        ref={this.saveDateInput}
         format={this.getFormat()}
         key="date-input"
         value={value}

diff --git a/src/RangeCalendar.js b/src/RangeCalendar.js
@@ -413,6 +413,10 @@ const RangeCalendar = createReactClass({
     return month.isSameOrBefore(value[0], 'month');
   },
 
+  saveRoot(root) {
+    this.rootInstance = root;
+  },
+
   render() {
     const props = this.props;
     const state = this.state;
@@ -473,7 +477,7 @@ const RangeCalendar = createReactClass({
             nextMonthOfStart.month() === endValue.month();
     return (
       <div
-        ref="root"
+        ref={this.saveRoot}
         className={classes}
         style={props.style}
         tabIndex="0"

diff --git a/src/date/DateInput.js b/src/date/DateInput.js
@@ -96,7 +96,13 @@ const DateInput = createReactClass({
   },
 
   focus() {
-    this.refs.dateInput.focus();
+    if (this.dateInputInstance) {
+      this.dateInputInstance.focus();
+    }
+  },
+
+  saveDateInput(dateInput) {
+    this.dateInputInstance = dateInput;
   },
 
   render() {
@@ -107,7 +113,7 @@ const DateInput = createReactClass({
     return (<div className={`${prefixCls}-input-wrap`}>
       <div className={`${prefixCls}-date-input-wrap`}>
         <input
-          ref="dateInput"
+          ref={this.saveDateInput}
           className={`${prefixCls}-input ${invalidClass}`}
           value={str}
           disabled={props.disabled}

diff --git a/src/mixin/CalendarMixin.js b/src/mixin/CalendarMixin.js
@@ -66,6 +66,10 @@ const CalendarMixin = {
     this.setSelectedValue(value, cause);
   },
 
+  saveRoot(root) {
+    this.rootInstance = root;
+  },
+
   renderRoot(newProps) {
     const props = this.props;
     const prefixCls = props.prefixCls;
@@ -79,7 +83,7 @@ const CalendarMixin = {
 
     return (
       <div
-        ref="root"
+        ref={this.saveRoot}
         className={`${classnames(className)}`}
         style={this.props.style}
         tabIndex="0"

diff --git a/src/mixin/CommonMixin.js b/src/mixin/CommonMixin.js
@@ -53,8 +53,8 @@ export default {
   },
 
   focus() {
-    if (this.refs.root) {
-      this.refs.root.focus();
+    if (this.rootInstance) {
+      this.rootInstance.focus();
     }
   },
 };