谈谈react组件中input

一切从需求出发，一切向功能看齐。我们讨论一个东西的时候，首先要知道它是干什么？ 

例如一个登录界面UI：

html和css写好了，放到了render函数中：

需求是这样的：想要获取真实dom，在react中怎么实现呢？用什么要获取真实的dom,因为react在render中

渲染的是虚拟dom(virtual DOM)。

有个需求需要处理用户输入的值：这时候我们就需要获取真实的dom,怎么做呢？

给input加入一个ref属性，<input ref="Dom" value="111"／> ,通过this.ref.dom就能获取到这个input，this.ref.Dom.value就能获取input中的值。

react中的input事件：onChange:当value发生改变时，触发该事件。

 

 

需求输入的手机号为这种格式：134 7326 0471  ,思路是在onChage事件中处理逻辑：

当输入的长度为3，8的时候加入一个" "

输入的情况：

var val = this.refs.Phone.value;
if ((val.length == 3 || val.length == 8) && (val.length > this.state.phoneValue.length)) {
　　val += " ";

}

还有可能是ctrl+v过来的信息：

if ((val.length >= 11) && (val.indexOf(' ') == -1)) {

　　val = val.split(' ').join('').slice(0, 3) + ' ' + val.split(' ').join('').slice(3, 7) + ' ' + val.split(' 　　').join('').slice(7)

}

控制一下输入的长度：

if (val.length > 11) {
　　val = val.slice(0,11);
}

getInitialState() {

　　return({

　　　　phoneValue: '',

　　})

}

this.setState({

　　　phoneValue: val

})

 这样我们就写好了对输入框的的value处理。

 

关键词：ref　　virtual DOM