nuke-input - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

docs/autofocus.md

@@ -1,6 +0,6 @@
-# 类型
+# focus、blur
 
 - order: 0
 
-普通。
+强制获取或失去焦点
 
@@ -12,7 +12,6 @@ ---
 /** @jsx createElement */
-import {createElement, Component,findDOMNode} from 'weex-rx';
+import {createElement, Component,findDOMNode,render } from 'rax';
 import { View, Text, ScrollView,TouchableHighlight} from 'nuke-components';
 import Input from 'nuke-input';
 import Button from 'nuke-button';
-import {mount} from 'nuke-mounter';
 
@@ -30,13 +29,12 @@
     }    
-    press=(e)=>{
-        findDOMNode(this.refs.myinput).event.blur();
-    }
+
     focus=(e)=>{
-        console.log(findDOMNode(this.refs.myinput));
-        findDOMNode(this.refs.myinput).event.focus();
+        this.refs.myinput.focus();
     }
-    change=(e)=>{
-        this.setState({value:e.value})
-        console.log(e);
+    blur = (e)=>{
+        this.refs.myinput.blur();
     }
+    change=(value,e)=>{
+        this.setState({value:value})
+    }
     render() {
@@ -48,5 +46,7 @@ return (
                 </View>
-                <TouchableHighlight onPress={this.focus}>点我让input获得焦点</TouchableHighlight>
-                <Button type="primary" onPress={this.press}>点我让input失去焦点，并获得值</Button>
-                <Text>{this.state.value}</Text>
+                <View style={[styles.row,{paddingLeft:0,paddingRight:0}]}>
+                    <Text>输入：{this.state.value}</Text>
+                </View>
+                <Button type="primary" onPress={this.focus}>点我让input获得焦点</Button>
+                <Button type="primary" onPress={this.blur}>失去焦点，获取输入内容</Button>
                         
@@ -79,4 +79,4 @@
 
-mount(<App/>, 'body');
+render(<App/>);
 
 ````

docs/basic.md

@@ -1,6 +0,6 @@
-# 类型
+# 各种类型的input
 
 - order: 0
 
-普通。
+包含单行和多行
 
@@ -12,8 +12,6 @@ ---
 /** @jsx createElement */
-import {createElement, Component} from 'weex-rx';
-import { View, Text, ScrollView} from 'nuke-components';
+import {createElement, Component,findDOMNode,render } from 'rax';
+import { View, Text,ScrollView} from 'nuke-components';
 import Input from 'nuke-input';
-import {mount} from 'nuke-mounter';
-
-
+import Button from 'nuke-button';
 let App = class NukeDemoIndex extends Component {
@@ -24,5 +22,12 @@ constructor() {
         this.state = {
-            d5:'',
-            d6:'',
-            
+            d1:'',
+            d2:'',
+            d3:'',
+            d4:'',
+            textVal:'',
+            valid1:'',
+            valid2:'',
+            data1:'',
+            data2:'',
+            content:''
         }
@@ -32,29 +37,137 @@
 
-    
-    c5=(e)=>{
-        let value = e;
-        // console.log('c5 onInput======>',e)
-        let maxLen = 5;
+    validate(result,key,e) {
+        var obj={};
+        obj[key]=result;
+        this.setState(obj);
+    }
+
+    c1=(value,e)=>{
+        console.log('onChange======>',value,e)
+        this.setState({
+            d1: value
+        }) 
+    }
+    keyup=(e)=>{
+        let value=e.value || e.target.value || '';
+        console.log('c4 keyup==>',value)
+        let maxLen=5;
         
         if(value.length>maxLen){
-            let va = value.substr(0,maxLen);
-            console.log('c5 cutto======>',m,value)
+            let m=value.substr(0,maxLen);
+            console.log('c4 cutto==>',m)
             this.setState({
-                d5 : m
+                d4 : m
             }) 
         }
+        
     }
-
+    c2=(e)=>{
+        // let value=e.value || e.target.value || '';
+        // console.log('c2 onInput==>',value)
+        // this.setState({
+        //     d2 : value
+        // }) 
+    }
+    c3=(e)=>{
+        
+        console.log('c3 onChange======>',e)
+        this.setState({
+            d3: e
+        }) 
+    }
+    c5=(e)=>{
+        let value=e || '';
+        console.log('c5 onInput======>',e)
+        
+        this.setState({
+            d5 : value
+        }) 
+        
+    }
     
-    
-    
+    textChange=(e)=>{
+        console.log(e)
+        let value=e.value || e.target.value || '';
+        this.setState({
+            textVal: value
+        }) 
+    }
+    d1change=(e)=>{
+        console.log(e)
+        let value=e.value || e.target.value || '';
+        this.setState({
+            d1: value
+        }) 
+    }
+    d2change=(e)=>{
+        console.log(e)
+        let value=e.value || e.target.value || '';
+        this.setState({
+            d2: value
+        }) 
+    }
+    focus = (e)=>{
+        this.refs.myinput.focus();
+    }
+    blur = (e)=>{
+        this.refs.myinput.blur();
+    }
+    change = (value, e)=>{
+        this.setState({
+            content: value
+        }) 
+    }
     render() {
-        console.log(/render/)
         return (
             <ScrollView style={{paddingTop:'30rem'}}>
-                <View style={styles.st}><Text style={styles.stText}>oninput</Text></View>
+                <View style={styles.st}><Text style={styles.stText}>input inset 使用 onChange 事件</Text></View>
+                <View style={[styles.row,{paddingLeft:0,paddingRight:0}]}>
+                    <Input ref="myinput" onChange={this.change}/>
+                </View>
+                <View style={[styles.row,{paddingLeft:0,paddingRight:0}]}>
+                    <Text>输入：{this.state.content}</Text>
+                </View>
+
+
+                <View style={styles.st}><Text style={styles.stText}>自定义样式</Text></View>
                 <View style={styles.row}>
-                    <Input  value={this.state.d5} onInput={this.c5.bind(this)} />
+                    <Input style={{borderWidth:0,backgroundColor:'#3089dc',color:'#ffffff'}}  />
                 </View>
+
+                <View style={styles.st}><Text style={styles.stText}>带clear按钮</Text></View>
+                <View style={styles.row}><Input hasClear={true} placeholder="搜一搜..." value={this.state.d3} onChange={this.c3.bind(this)} /></View>
                 
+
+                <View style={styles.st}><Text style={styles.stText}>输入校验success反馈</Text></View>
+                <View style={styles.row}><Input hasFeedback="true" onChange={this.validate.bind(this,'success','valid1')} state={this.state.valid1} /></View>
+
+                <View style={styles.st}><Text style={styles.stText}>输入校验error反馈</Text></View>
+                <View style={styles.row}><Input hasFeedback="true" placeholder="请输入..." onChange={this.validate.bind(this,'error','valid2')} state={this.state.valid2} /></View>
+                
+
+                <View style={styles.st}><Text style={styles.stText}>textarea</Text></View>
+                <View style={styles.row}><Input style={{height:'300rem',marginBottom:'20rem'}}  autoFocus={true} multiple={true} placeholder="设置高度300rem" onFocus={(e) => console.log('onFocus',e)} onBlur={(e) => console.log('onBlur',e)}/></View>
+                <View style={styles.row}><Input multiple={true} placeholder="介绍一下" value="大家好我是xxxx"
+                        /></View>
+
+
+                <View style={styles.st}><Text style={styles.stText}>read only</Text></View>
+                <View style={[styles.row,{marginBottom:'10rem'}]}><Input readOnly placeholder="输入姓名" defaultValue="只读"/></View>
+
+                <View style={styles.row}><Input style={{height:'400rem',marginBottom:'10rem'}} readOnly multiple={true}  placeholder="输入简介..." defaultValue="只读textarea"/></View>
+
+                <View style={styles.st}><Text style={styles.stText}>disabled</Text></View>
+                <View style={[styles.row,{marginBottom:'10rem'}]}><Input disabled placeholder="输入姓名" defaultValue="不可用"/></View>
+
+                <View style={styles.row}><Input style={{height:'400rem',marginBottom:'10rem'}} disabled multiple={true} placeholder="输入简介..." defaultValue="不可用textarea"/></View>
+                <View style={styles.st}><Text style={styles.stText}>富文本字数统计（失去焦点时统计）</Text></View>
+                <View style={styles.row}><Input style={{height:'400rem',marginBottom:'10rem'}}  multiple={true} maxLength="200" placeholder="输入简介..." hasLimitHint defaultValue="富文本字数统计"/></View>
+                <View style={styles.st}><Text style={styles.stText}>多种键盘类型</Text></View>
+                <View style={styles.row}><Input placeholder="默认text" htmlType="text" /></View>
+                <View style={styles.row}><Input placeholder="password" htmlType="password" /></View>
+                <View style={styles.row}><Input placeholder="email" htmlType="email" /></View>
+                <View style={styles.row}><Input placeholder="url" htmlType="url" /></View>
+                <View style={styles.row}><Input placeholder="tel" htmlType="tel" /></View>
+                <View style={styles.row}><Input placeholder="date" htmlType="date" /></View>
+                <View style={styles.row}><Input placeholder="time" htmlType="time" /></View>
                         
@@ -86,5 +199,5 @@
 }
+render(<App/>);
 
-mount(<App/>, 'body');
 
 ````

HISTORY.md

 # Changelog 
 
 
+## 0.3.0 / 2017-02-17 
+
+  * [[45fec9d](http://gitlab.alibaba-inc.com/nuke/input/commit/45fec9de0dd0f4bdb3ceaeb22072b15cba4c21d7)] - `feat` rax update,add focus blur function 
+
 ## 0.2.1 / 2017-01-23 
@@ -5,0 +9,0 @@

lib/index.js

@@ -21,3 +21,3 @@ /** @jsx createElement */
 
-var _weexRx = require('weex-rx');
+var _rax = require('rax');
 
@@ -40,2 +40,10 @@ var _nukeComponents = require('nuke-components');
 
+var _attributes = require('./mods/attributes');
+
+var _attributes2 = _interopRequireDefault(_attributes);
+
+var _events = require('./mods/events');
+
+var _events2 = _interopRequireDefault(_events);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -52,7 +60,5 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-// import InputStyles from './index.rxscss';
 
-
 // 下面的属性需要在Text上手工继承
-var TextAttrArr = ['color', 'fontSize', 'fontStyle', 'fontWeight', 'lineHeight', 'textAlign', 'textDecoration', 'textDecoration'];
+var TextAttrArr = ['color', 'fontSize', 'fontStyle', 'fontWeight', 'lineHeight', 'textAlign', 'textDecoration'];
 var h5Normalize = (_h5Normalize = {}, _defineProperty(_h5Normalize, '-webkit-appearance', 'none'), _defineProperty(_h5Normalize, 'outline', 'none'), _defineProperty(_h5Normalize, 'box-sizing', 'border-box'), _defineProperty(_h5Normalize, 'width', '100%'), _defineProperty(_h5Normalize, 'border', 'none'), _defineProperty(_h5Normalize, 'resize', 'none'), _h5Normalize);
@@ -86,5 +92,12 @@
 
+        _this.focus = function () {
+            _this.refs.input.focus && _this.refs.input.focus();
+        };
 
+        _this.blur = function () {
+            _this.refs.input.blur && _this.refs.input.blur();
+        };
+
         _this.changeHandler = _this.changeHandler.bind(_this);
-        _this.inputHandler = _this.inputHandler.bind(_this);
+        // this.inputHandler = this.inputHandler.bind(this);
         _this.focusHandler = _this.focusHandler.bind(_this);
@@ -148,5 +161,5 @@ _this.blurHandler = _this.blurHandler.bind(_this);
             // const type = this.getValueFromContextAndProp('type') || 'enclosed';
+            //如果当前的没有设置, 则取上下文的state
 
 
-            //如果当前的没有设置, 则取上下文的state
             if (state === undefined) state = this.context.state;
@@ -162,3 +175,3 @@
                 onChange: this.changeHandler,
-                onInput: this.inputHandler,
+                // onInput: this.inputHandler,
                 onFocus: this.focusHandler,
@@ -196,13 +209,13 @@ onBlur: this.blurHandler,
                 if (_nukeEnv.isWeb) {
-                    inputElement = (0, _weexRx.createElement)(
+                    inputElement = (0, _rax.createElement)(
                         'textarea',
-                        _extends({ ref: ref, style: [h5Normalize, elementStyle] }, attrs, this.pickAttrs(others)),
+                        _extends({ ref: 'input', style: [h5Normalize, elementStyle] }, attrs, this.pickAttrs(others)),
                         attrs.value
                     );
                 } else {
-                    inputElement = (0, _weexRx.createElement)('textarea', _extends({ ref: ref, style: elementStyle }, attrs, this.pickAttrs(others)));
+                    inputElement = (0, _rax.createElement)('textarea', _extends({ ref: 'input', style: elementStyle }, attrs, this.pickAttrs(others)));
                 }
             } else {
                 var x = _nukeEnv.isWeb ? [h5Normalize, elementStyle] : elementStyle;
-                inputElement = (0, _weexRx.createElement)('input', _extends({ ref: ref
+                inputElement = (0, _rax.createElement)('input', _extends({ ref: 'input'
                 }, attrs, this.pickAttrs(others), {
@@ -214,10 +227,10 @@ type: this.props.htmlType,
 
-            return (0, _weexRx.createElement)(
+            return (0, _rax.createElement)(
                 _nukeComponents.View,
                 { style: newStyle },
-                (0, _weexRx.createElement)(
+                (0, _rax.createElement)(
                     _nukeComponents.View,
                     { x: 'innner-flex', style: _styles2.default['inner-flex'] },
                     this.renderAddonBefore(baseClass, isAddonMode),
-                    (0, _weexRx.createElement)(
+                    (0, _rax.createElement)(
                         _nukeComponents.View,
@@ -255,3 +268,3 @@ { x: 'innner-input-box', style: [_styles2.default['inner-input-box'], _styles2.default[flexVal]] },
             if (this.props.addonBefore && isAddonMode) {
-                return (0, _weexRx.createElement)(
+                return (0, _rax.createElement)(
                     'div',
@@ -267,3 +280,3 @@ { style: [_styles2.default[baseClass + '-addon'], _styles2.default[baseClass + '-addon-before']] },
             if (this.props.addonAfter && isAddonMode) {
-                return (0, _weexRx.createElement)(
+                return (0, _rax.createElement)(
                     'div',
@@ -278,8 +291,7 @@ { style: [_styles2.default[baseClass + '-addon'], _styles2.default[baseClass + '-addon-after']] },
         value: function pickAttrs(props) {
-            var attributes = 'accept acceptCharset accessKey action allowFullScreen allowTransparency\nalt async autoComplete autoPlay capture cellPadding cellSpacing challenge\ncharSet checked classID className colSpan cols content contentEditable contextMenu\ncontrols coords crossOrigin data dateTime default defer dir disabled download draggable\nencType form formAction formEncType formMethod formNoValidate formTarget frameBorder\nheaders height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity\nis keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media\nmediaGroup method min minLength multiple muted name noValidate nonce open\noptimum pattern placeholder poster preload radioGroup readOnly rel required\nreversed role rowSpan rows sandbox scope scoped scrolling seamless selected\nshape size sizes span spellCheck src srcDoc srcLang srcSet start step style\nsummary tabIndex target title type useMap value width wmode wrap'.replace(/\s+/g, ' ').replace(/\t|\n|\r/g, '').split(' '),
-                eventsName = 'onCopy onCut onPaste onCompositionEnd onCompositionStart onCompositionUpdate onKeyDown\n    onKeyPress onKeyUp onFocus onBlur onChange onInput onSubmit onClick onContextMenu onDoubleClick\n    onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown\n    onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onSelect onTouchCancel\n    onTouchEnd onTouchMove onTouchStart onScroll onWheel onAbort onCanPlay onCanPlayThrough\n    onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata\n    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad onError'.replace(/\s+/g, ' ').replace(/\t|\n|\r/g, '').split(' '),
-                attrsPrefix = ['data-', 'aria-'];
+
+            var attrsPrefix = ['data-', 'aria-'];
             var attrs = {};
             for (var key in props) {
-                if (attributes.indexOf(key) > -1 || eventsName.indexOf(key) > -1) {
+                if (_attributes2.default.indexOf(key) > -1 || _events2.default.indexOf(key) > -1) {
                     attrs[key] = props[key];
@@ -310,6 +322,6 @@ } else if (attrsPrefix.map(function (prefix) {
             var counterStyle = Object.assign({}, _styles2.default['input-counter'], _styles2.default[type + '-' + (multiple ? 'multiple' : 'single') + '-counter']);
-            return (0, _weexRx.createElement)(
+            return (0, _rax.createElement)(
                 _nukeComponents.View,
                 { style: counterStyle },
-                (0, _weexRx.createElement)(
+                (0, _rax.createElement)(
                     _nukeComponents.Text,
@@ -356,4 +368,3 @@ { style: _styles2.default['input-counter-text'] },
             var clearStyle = Object.assign({}, _styles2.default['clear'], _styles2.default['single-clear'], _styles2.default[type + '-single-clear']);
-            // console.log('clearstyle',clearStyle)
-            return (0, _weexRx.createElement)(_nukeIcon2.default, { x: 'clear-icon', onPress: this.clearHandler, size: 'medium', name: 'deleteFilling', style: clearStyle });
+            return (0, _rax.createElement)(_nukeIcon2.default, { x: 'clear-icon', onPress: this.clearHandler, size: 'medium', name: 'deleteFilling', style: clearStyle });
         }
@@ -386,6 +397,4 @@ }, {
             // debugger;
-            // console.log('type',type);
-            // console.log('styles[`${type}-single-feedback`]',styles[`${type}-single-feedback`]);
             var feedbackStyle = Object.assign({}, _styles2.default['feedback'], _styles2.default['single-feedback'], _styles2.default[type + '-single-feedback'], _styles2.default['single-' + state + '-feedback']);
-            return (0, _weexRx.createElement)(_nukeIcon2.default, { x: 'feedback-icon', name: state + 'Filling', size: 'medium', style: feedbackStyle });
+            return (0, _rax.createElement)(_nukeIcon2.default, { x: 'feedback-icon', name: state + 'Filling', size: 'medium', style: feedbackStyle });
         }
@@ -413,23 +422,20 @@ }, {
         }
-    }, {
-        key: 'inputHandler',
-        value: function inputHandler(e) {
-            var value = void 0,
-                event = void 0;
-            if (_nukeEnv.isWeb) {
-                value = e.target.value;
-            } else {
-                value = e.value;
-            }
-            var maxLength = this.props.maxLength;
+        // inputHandler(e){
+        //     let value ,event;
+        //     if(isWeb){
+        //         value = e.target.value;
+        //     }else{
+        //         value = e.value;
+        //     }
+        //     const { maxLength } = this.props;
 
+        //     this.trigger('onInput', value, e);
+        //     this.setUnControlledState('value', value);
 
-            this.trigger('onInput', value, e);
-            this.setUnControlledState('value', value);
+        //     // 不管有没有到达maxLength
+        //     // !!!必须优先确保trigger onChange，让state与value同步
+        //     // 解决中文输入时由于value不同步被打断的问题
+        //     if(maxLength && value.length > maxLength) return;
+        // }
 
-            // 不管有没有到达maxLength
-            // !!!必须优先确保trigger onChange，让state与value同步
-            // 解决中文输入时由于value不同步被打断的问题
-            if (maxLength && value.length > maxLength) return;
-        }
     }, {
@@ -515,29 +521,29 @@ key: 'updateStateFromProps',
     return Input;
-}(_weexRx.Component);
+}(_rax.Component);
 
 Input.propTypes = {
-    readOnly: _weexRx.PropTypes.bool,
-    inMatrix: _weexRx.PropTypes.bool,
-    align: _weexRx.PropTypes.oneOf(['left', 'right', 'center']),
-    multiple: _weexRx.PropTypes.bool,
-    hasFeedback: _weexRx.PropTypes.bool,
-    hasClear: _weexRx.PropTypes.bool,
-    type: _weexRx.PropTypes.oneOf(['enclosed', 'inset']),
-    state: _weexRx.PropTypes.oneOf(['', 'success', 'error', 'warning']),
-    value: _weexRx.PropTypes.any,
-    defaultValue: _weexRx.PropTypes.any,
-    size: _weexRx.PropTypes.oneOf(['small', 'large', 'medium']),
-    disabled: _weexRx.PropTypes.bool,
-    onClick: _weexRx.PropTypes.func,
-    maxLength: _weexRx.PropTypes.number,
+    readOnly: _rax.PropTypes.bool,
+    inMatrix: _rax.PropTypes.bool,
+    align: _rax.PropTypes.oneOf(['left', 'right', 'center']),
+    multiple: _rax.PropTypes.bool,
+    hasFeedback: _rax.PropTypes.bool,
+    hasClear: _rax.PropTypes.bool,
+    type: _rax.PropTypes.oneOf(['enclosed', 'inset']),
+    state: _rax.PropTypes.oneOf(['', 'success', 'error', 'warning']),
+    value: _rax.PropTypes.any,
+    defaultValue: _rax.PropTypes.any,
+    size: _rax.PropTypes.oneOf(['small', 'large', 'medium']),
+    disabled: _rax.PropTypes.bool,
+    onClick: _rax.PropTypes.func,
+    maxLength: _rax.PropTypes.number,
     //是否显示限制长度的提示
-    hasLimitHint: _weexRx.PropTypes.bool,
+    hasLimitHint: _rax.PropTypes.bool,
 
     // 文本域前后附加内容
-    addonBefore: _weexRx.PropTypes.string,
-    addonAfter: _weexRx.PropTypes.string,
+    addonBefore: _rax.PropTypes.string,
+    addonAfter: _rax.PropTypes.string,
 
     // 增加htmlType枚举检查
     // mext-input用于文本输入型场景
-    htmlType: _weexRx.PropTypes.oneOf(['search', 'text', 'tel', 'email', 'url', 'password', 'number'])
+    htmlType: _rax.PropTypes.oneOf(['search', 'text', 'tel', 'email', 'url', 'password', 'number'])
 };
@@ -553,8 +559,8 @@ Input.defaultProps = {
 Input.contextTypes = {
-    align: _weexRx.PropTypes.string,
-    type: _weexRx.PropTypes.string,
-    form: _weexRx.PropTypes.object,
-    state: _weexRx.PropTypes.string
+    align: _rax.PropTypes.string,
+    type: _rax.PropTypes.string,
+    form: _rax.PropTypes.object,
+    state: _rax.PropTypes.string
 };
 exports.default = Input;
 module.exports = exports['default'];

package.json

 {
   "name": "nuke-input",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "输入框",
@@ -5,0 +5,0 @@ "main": "lib/index",

README.md

@@ -16,3 +16,3 @@
 | :------------- | :------------- |:------------- |:------------- |
-| type      | 类型，可选为enclosed（有边线）/inset（空白） | string |   enclosed |
+| type      | 类型，可选为enclosed（有边线）/inset（空白） | string |   enclosed |
 | multiple      | 是否为多行，不选则为单行  | bool |   false |
@@ -26,3 +26,3 @@ | state      | 状态，可选为`''/success/error/warning`  | string |   '' |
 | onBlur      | Blur事件 | `function` |  false |
-| onChange      | change事件 (**在weex native 的触发时机可能有问题**)| `function(value, e)` |   |
+| onChange      | change| `function(value, e)` |   |
 | maxLength      | 最大长度  | number |   undefined |
@@ -36,15 +36,38 @@ | hasFeedback| 是否出现反馈|   boolean | false |
 | autoFocus | 自动获得焦点| boolean|false
+| focus 实例方法|  让input获得焦点|`function`| |
+| blur 实例方法|  让input失去焦点|`function`| |
 
 
-### 关于defaultValue 与 value (非受控与受控的差别)
-- defaultValue : 传入value 默认值，用于constructor中计算使用，生命周期函数改变也不会再改变。
+### 关于 defaultValue 与 value (非受控与受控的差别)
+- defaultValue : 传入 value 默认值，用于 constructor 中计算使用，生命周期函数改变也不会再改变。
 ````js
-<Input defaultValue="羊绒大衣" onInput={(e)=>{console.log('onInput==>',e.value || e.target.value)}} />
+<Input defaultValue="羊绒大衣" onChange={(value,e)=>{console.log(value)}} />
 ````
 - value: 受控用法，会随着生命周期函数改变而改变。
+````js
+<Input value={this.state.value} onChange={(value,e)=>{console.log(value)}}/>
+````
 
+### 实例方法 `focus` 和 `blur`
+
 ````js
-<Input value={this.state.value} onChange={(value,e)=>{ this.setState({value:value});console.log('onChange==>',value)}} />
+    //在某些情况下需要让 myinput 强制失去焦点
+    focus=(e)=>{
+        this.refs.myinput.focus();
+    }
+    blur = (e)=>{
+        this.refs.myinput.blur();
+    }
+    change=(value,e)=>{
+        console.log(value);//强制失去焦点后，会触发 onCchange
+    }
+    render(){
+        return (
+            <View>
+                <Input ref="myinput" onChange={this.change}/>
+                <Button type="primary" onPress={this.focus}>点我让input获得焦点</Button>
+                <Button type="primary" onPress={this.blur}>失去焦点，获取输入内容</Button>
+            </View>
+        )
+    }
 ````
-
-**注意：不要使用 `value={this.state.value}` 与 `onInput={(value,e)=>{ this.setState({value:value})}}`  对 this.state.value 进行双向绑定，将会破坏中文输入法对于输入中文状态的字符的处理，导致输入中文的时候出现多字bug**

theme/index.jsx

 /** @jsx createElement */
-import {createElement, Component,findDOMNode} from 'weex-rx';
+import {createElement, Component,findDOMNode,render } from 'rax';
 import { View, Text,ScrollView} from 'nuke-components';
 import Input from 'nuke-input';
 import Button from 'nuke-button';
-import {mount} from 'nuke-mounter';
 
 
+
 let App = class NukeDemoIndex extends Component {
@@ -22,3 +22,4 @@ constructor() {
             data1:'',
-            data2:''
+            data2:'',
+            content:''
         }
@@ -99,6 +100,13 @@
     }
-    focus=(e)=>{
-        console.log(findDOMNode(this.refs.myinput));
-        findDOMNode(this.refs.myinput).event.focus();
+    focus = (e)=>{
+        this.refs.myinput.focus();
     }
+    blur = (e)=>{
+        this.refs.myinput.blur();
+    }
+    change = (value, e)=>{
+        this.setState({
+            content: value
+        }) 
+    }
     render() {
@@ -109,29 +117,14 @@ return (
                 <View style={[styles.row,{paddingLeft:0,paddingRight:0}]}>
-                    <Input ref="myinput"/>
+                    <Input ref="myinput" onChange={this.change}/>
                 </View>
-                <Button type="primary" onPress={this.focus}>点我让input获得焦点</Button>
                 <View style={[styles.row,{paddingLeft:0,paddingRight:0}]}>
-                    <Input type="inset" value={this.state.d1} onChange={this.c1.bind(this)} style={{backgroundColor:'#f3f3f3'}} />
+                    <Text>输入：{this.state.content}</Text>
                 </View>
-                <Text>输入的是：{this.state.d1}</Text>
 
-                <View style={styles.st}><Text style={styles.stText}>oninput</Text></View>
+
+                <View style={styles.st}><Text style={styles.stText}>自定义样式</Text></View>
                 <View style={styles.row}>
-                    <Input type="inset" value={this.state.d5} onInput={this.c5.bind(this)} />
+                    <Input style={{borderWidth:0,backgroundColor:'#3089dc',color:'#ffffff'}}  />
                 </View>
 
-                
-                <View style={styles.st}><Text style={styles.stText}>input onInput 实时获取</Text></View>
-                <View style={styles.row}><Input placeholder="搜一搜..." onKeyUp={this.keyup} defaultValue="羊绒大衣" onInput={this.c2.bind(this)} /></View>
-                <Text>实时获取：{this.state.d2}</Text>
-
-                <View style={styles.st}><Text style={styles.stText}>input onInput 实时获取2</Text></View>
-                <View style={styles.row}><Input placeholder="搜一搜..." onKeyUp={this.keyup} value={this.state.d4}/></View>
-                <Text>实时获取2：{this.state.d4}</Text>
-
-
-
-                <View style={styles.st}><Text style={styles.stText}>自定义样式</Text></View>
-                <View style={styles.row}><Input style={{borderWidth:0,backgroundColor:'#3089dc',color:'#ffffff'}}  /></View>
-
                 <View style={styles.st}><Text style={styles.stText}>带clear按钮</Text></View>
@@ -199,2 +192,2 @@ <View style={styles.row}><Input hasClear={true} placeholder="搜一搜..." value={this.state.d3} onChange={this.c3.bind(this)} /></View>
 }
-mount(<App/>,  'body');
+render(<App/>);

No alert changes

Improved metrics

Total package byte prevSize

99747

increased by5.41%

Number of package files

15

increased by15.38%

Lines of code

1094

increased by0.74%

Number of lines in readme file

71

increased by51.06%

No dependency changes