談談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