fix: Refs Must Have Owner Warning in React 16.1.1

uiwjs · Nov 21, 2017 · bd3d8d8 · bd3d8d8
1 parent 91695e7
commit bd3d8d8
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 23 deletions.
diff --git a/src/date-picker/BasePicker.js b/src/date-picker/BasePicker.js
@@ -44,12 +44,6 @@ export default class BasePicker extends Component {
       { ...this.propsToState(props) }
     )
   }
-  componentDidMount() {
-    this.input = ReactDOM.findDOMNode(this.refs.input);
-    this.setState({
-      inputWidth: this.input.getBoundingClientRect().width
-    })
-  }
   componentWillReceiveProps(nextProps) {
     this.setState({ ...this.propsToState(nextProps) })
   }
@@ -71,9 +65,6 @@ export default class BasePicker extends Component {
   }
   onMouseDown(e) {
     const { visible } = this.state;
-    if (this.refs.input) {
-      this.refs.input.focus();
-    }
     if (!visible) {
       // 单选展开菜单
       this.toggleMenu(e);
@@ -150,7 +141,6 @@ export default class BasePicker extends Component {
       <span style={style} className={this.classNames(states.className, className, 'w-date-base')}>
         <Input
           type="text"
-          ref="input"
           {...props}
           value={text}
           onMouseDown={this.onMouseDown.bind(this)}
@@ -178,4 +168,4 @@ BasePicker.defaultProps = {
   placeholder: '选择时间',
   readOnly: false,
   disabled: false,
-}
+}
diff --git a/src/date-picker/TimePicker.js b/src/date-picker/TimePicker.js
@@ -26,4 +26,4 @@ export default class TimePicker extends BasePicker {
       />
     )
   }
-}
+}
diff --git a/src/date-picker/TimePickerSpinner.js b/src/date-picker/TimePickerSpinner.js
@@ -20,13 +20,6 @@ export default class TimeSpinner extends Component {
     this.renderItem = this.renderItem.bind(this)
     this.handleClick = this.handleClick.bind(this)
   }
-  componentDidMount() {
-    const { several } = this.state;
-    let { spinner } = this.refs;
-    if (spinner.children && spinner.children[0]) {
-      spinner.style.width = spinner.children[0].offsetWidth * several.length + 'px'
-    }
-  }
   // 生成时间
   rangeTime(end, ty) {
     return TimeSpinner.items(end, ty, this.props);
@@ -82,7 +75,17 @@ export default class TimeSpinner extends Component {
     const { several } = this.state;
 
     return (
-      <div ref="spinner" className={this.classNames(`${prefixCls}`)}>
+      <div
+        ref={(elm) => {
+          if (elm) {
+            const { several } = this.state;
+            if (elm.children && elm.children[0]) {
+              elm.style.width = elm.children[0].offsetWidth * several.length + 'px'
+            }
+          }
+        }}
+        className={this.classNames(`${prefixCls}`)}
+      >
         {several.indexOf('HH') > -1 && this.renderItem(this.rangeTime(24, 'hours'))}
         {several.indexOf('mm') > -1 && this.renderItem(this.rangeTime(60, 'minutes'))}
         {several.indexOf('ss') > -1 && this.renderItem(this.rangeTime(60, 'seconds'))}

diff --git a/src/date-picker/style/time-select.less b/src/date-picker/style/time-select.less
@@ -1,6 +1,8 @@
 .w-timeselect,.w-timepicker {
   .w-popper-warpper {
     position: absolute;
+    width: 100%;
+    text-align: left;
   }
 }
 .w-timepicker-panel-popper, .w-timeselect-panel-popper {

diff --git a/src/input/Input.js b/src/input/Input.js
@@ -120,7 +120,6 @@ export default class Input extends Component {
         {icon && this.renderIcon.bind(this)('icon')}
         <input
           {...other}
-          ref="input"
           type={type}
           className={this.classNames(`${prefixCls}-inner`, {
             [`${prefixCls}-p-left`]: preIcon,

diff --git a/src/time-picker/__test__/TimePicker.test.js b/src/time-picker/__test__/TimePicker.test.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { TimePicker } from '../../../src';
+
+describe('<TimePicker>', () => {
+  var wrapper = mount(
+    <TimePicker
+      onChange={() => {
+
+      }}
+      disabledHours={['00', '01']}
+      disabledMinutes={['01', '02']}
+      disabled={true}
+      format="HH:mm:ss"
+      placeholder="选择时间de拉！"
+      value={new Date(2017, 6, 28, 15, 51)}
+    ></TimePicker>
+  );
+
+  it('Test the default props and node.', () => {
+    expect(wrapper.name()).toBe('TimePicker');
+    // 默认值测试
+    expect(wrapper.type()).toEqual(TimePicker);
+  })
+
+})
diff --git a/src/transition/index.js b/src/transition/index.js
@@ -73,7 +73,6 @@ export default class Animate extends Component {
       <Transition
         {...other}
         style={other.style}
-        ref="transition"
         className={prefixCls}
         in={transitionIn}
         timeout={timeout}
@@ -104,4 +103,4 @@ Animate.defaultProps = {
   animateOnMount: true, // 安装动画
   duration: 200,        // 持续时间
   wait: 200             // 等待出现和退出时间
-};
+};