Input 性能问题

ZhongAnTech · Aug 24, 2017 · d22c652 · d22c652
1 parent f385e48
commit d22c652
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,14 +1,14 @@
 # 版本更新日志  
-
+    
 ## v1.0.11
 - Feature
-    - `Checkbox`新增属性id，并调整文字的显示样式。（[4149c01](https://github.com/ZhonganTechENG/zarm/commit/b7135ade392d6edfeb70f90b42ee056d0d969dde)）
-    - `Tab`新增canSwipe属性，支持左右滑动切换。`Swipe`新增showPagination属性，用于是否显示圆点分页。([406c0b4](https://github.com/ZhonganTechENG/zarm/commit/168ea1944917211614603f0691b5f79337b8ad17))
-    - `Message`新增属性icon，用于设置图标。新增hasArrow、onClick属性，用于显示箭头并支持点击事件。新增hasClosable属性，用于关闭消息。
-    - 新增`NoticeBar`组件。
+  - `Checkbox`新增属性id，并调整文字的显示样式。（[4149c01](https://github.com/ZhonganTechENG/zarm/commit/b7135ade392d6edfeb70f90b42ee056d0d969dde)）
+  - `Tab`新增canSwipe属性，支持左右滑动切换。`Swipe`新增showPagination属性，用于是否显示圆点分页。([406c0b4](https://github.com/ZhonganTechENG/zarm/commit/168ea1944917211614603f0691b5f79337b8ad17))
+  - `Message`新增属性icon，用于设置图标。新增hasArrow、onClick属性，用于显示箭头并支持点击事件。新增hasClosable属性，用于关闭消息。
+  - 新增`NoticeBar`组件。
 
 -  Improve && Enhancement
-    - `Swipe`体验优化。循环轮播返回到第一个item时pagination位置更新在动画结束前就执行。（[8270305](https://github.com/ZhonganTechENG/zarm/commit/3d8de9671d8d633bd729d4f28ce17d1e1fd4b512)）
+  - `Swipe`体验优化。循环轮播返回到第一个item时pagination位置更新在动画结束前就执行。（[8270305](https://github.com/ZhonganTechENG/zarm/commit/3d8de9671d8d633bd729d4f28ce17d1e1fd4b512)）
 
 ## v1.0.10
 - Bug Fix

diff --git a/components/Input/Input.jsx b/components/Input/Input.jsx
@@ -2,20 +2,18 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Autosize from 'autosize';
-import Events from '../utils/events';
 
 class Input extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
       length: 0,
     };
-    this.setLength = this.setLength.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
   }
 
   componentDidMount() {
     this.initAutosize();
-    Events.on(this.input, 'input', this.setLength);
   }
 
   componentDidUpdate(prevProps) {
@@ -27,14 +25,16 @@ class Input extends PureComponent {
 
   componentWillUnmount() {
     this.destroyAutosize();
-    Events.off(this.input, 'input', this.setLength);
   }
 
-  // 设置长度
-  setLength() {
+  onInputChange(e) {
+    const { onChange } = this.props;
+
     this.setState({
-      length: this.input.value.length,
+      length: e.target.value.length,
     });
+
+    typeof onChange === 'function' && onChange(e);
   }
 
   // 初始化自适应高度
@@ -55,7 +55,6 @@ class Input extends PureComponent {
       className,
       placeholder,
       type,
-      defaultValue,
       maxLength,
       disabled,
       autosize,
@@ -72,25 +71,23 @@ class Input extends PureComponent {
     const inputRender = (type === 'textarea')
       ? (
         <textarea
+          {...others}
           ref={(ele) => { this.input = ele; }}
           className={cls}
           placeholder={placeholder}
           disabled={disabled}
-          maxLength={maxLength}
-          defaultValue={defaultValue}
-          {...others}
+          onChange={this.onInputChange}
           />
       )
       : (
         <input
+          {...others}
           ref={(ele) => { this.input = ele; }}
           type={type}
           className={cls}
           placeholder={placeholder}
-          defaultValue={defaultValue}
           disabled={disabled}
-          maxLength={maxLength}
-          {...others}
+          onChange={this.onInputChange}
           />
       );
 

diff --git a/components/Uploader/__tests__/index.test.jsx b/components/Uploader/__tests__/index.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { render } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import Uploader from '../index';
 

diff --git a/examples/pages/InputPage.jsx b/examples/pages/InputPage.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import Container from '../components/Container';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
-import { Panel, Icon, Input, Cell, Message } from '../../components';
+import { Panel, Input, Cell } from '../../components';
 
 class Page extends Component {