React入門系列 - 5. 表單與變量的關聯

5. 表單與變量的關聯

在瞭解表單的時候，咱們須要瞭解一個概念受控組件和非受控組件。

受控組件就是React能夠控制這個組件內部全部的東西，好比設置控件的value,能夠監聽到這個組件改變事件onChange。可是，有些Html控件沒法讓React控制，典型的就是input type=file控件，他的value是隻讀的，React不管如何控制，都沒法重置value值，並且對於非受控組件，咱們沒法對他進行數據判斷處理。

所有都須要經過refs來獲取，而且直接操做這個DOM的原生方法與屬性。

5.1 經過input獲取而且顯示值

咱們來看看，如何爲input指定state的值。

5.1.1 直接修改

<input onInput={(e)=>{
    this.setState({x:e.value})
}} />
複製代碼

咱們直接通爲控件指定了一個箭頭方法進行修改state值，可是這樣的修改方式，在一個表單中會顯的比較累贅。咱們能夠經過一個小的代理方式進行修改。

5.1.2 代理修改

handleUpdateState (event) {
    let id = event.target.id;
    let idArrays = id.split('.');
    let obj = this.state;
    let NowObj = obj;
    for (var i = 0; i < idArrays.length; i++) {
        if (i < idArrays.length - 1) {
            if (!NowObj[idArrays[i]]) {
                NowObj[idArrays[i]] = {};
            }
            NowObj = NowObj[idArrays[i]];

        } else {
            NowObj[idArrays[i]] = event.target.value;
        }
    }
    this.setState(obj);
}

<input id="name" onInput={this.handleUpdateState.bind(this)} />
複製代碼

方法很簡單，經過讀取空間上的id，按照id的命名空間將值寫入所屬節點中。 而這樣咱們就能夠經過一個方法修改全部的值，而且能夠在id上指定修改的層級。

5.2 經過check獲取而且顯示值

state = {
    checked:false
}

handleCheckBox () {
    this.setStat({checked:!this.state.checked})
}

 <input type="checkbox" checked = {this.state.checked} onChange={this.handleCheckBox.bind(this)}/>
複製代碼

通常來講，咱們使用checkbox的場景是在多選環境下，若是項目中須要進行多選功能，那麼你須要提早作一個數組來保存多選值。這樣checkbox是在受控狀況下渲染的。

state = {
    items:[
        {name:'checkbox1',checked:false},
        {name:'checkbox2',checked:false},
        {name:'checkbox3',checked:false}
    ]
}

handleCheckBox () {
    this.setStat({checked:!this.state.checked})
}

this.state.items.map(p=> <input type="checkbox" checked = {this.state.checked} onChange={this.handleCheckBox.bind(this)}/>)
複製代碼

5.3 經過radio獲取而且顯示值

radio就比較簡單了，能夠設置一個值，直接由radio出現改變的時候改變這個值

state = {
   checked:-1
}

handleCheckBox (val) {
    this.setStat({checked:val})
}

<input type="radio" checked = {this.state.checked==='1'} onChange={this.handleCheckBox.bind(this,1)}/>
<input type="radio" checked = {this.state.checked==='2'} onChange={this.handleCheckBox.bind(this,2)}/>
<input type="radio" checked = {this.state.checked==='3'} onChange={this.handleCheckBox.bind(this,3)}/>
複製代碼

原文:www.yodfz.com/detail/38/5…