前端筆記（關於受控組件與非受控組件）

何爲受控組件與非受控組件？

像input、textarea、select標籤等在html中是能夠進行用戶輸入改變內容的，而在react中即便一個原生組件。受控與非受控就從這幾個組件中說明

 

受控組件：從字面理解，就是組件受到了react的狀態控制，

。因此要使用setState才能進行修改內容

當input、textarea、select等中設置了value屬性時，將變成受控組件，使用onChange事件進行觸發。

進行篩選表單驗證時很適合，確保提交時的數據正確，減小請求。

<input type="text" value={this.state.text} onChange={this.change1.bind(this)}/>

<textarea name="" id="" cols="30" rows="10" value={this.state.text2} onChange={this.change2.bind(this)}></textarea>

此時更改內容將使用state與setState

this.state={
    text:"",
    text2:"",
    checkedIndex:0,
}

change1(e){
    this.setState({text:e.target.value})
}

關於input的type="radio"單選框時，可設置一個數組做爲input屬性

state設置當前選中第幾個的下標

 

遍歷時checked處作判斷

觸發事件時更改當前選中項便可

 

 

非受控組件：就是組件的狀態不收到react控制，不用setState。通常會選擇使用ref。若是須要value有默認值 則可以使用defaultValue屬性

若是是一次提交，就很適合使用這種方式

<form action="" onSubmit={this.handle.bind(this)}>
    <input type="text" defaultValue="555" ref="text2"/>
    <input type="submit" value="submit"/>
</form>

修改表單時不會更改狀態，就最後提交submit時進行驗證

handle(e){
    console.log(this.refs.text2.value)
    e.preventDefault()//防止默認提交
}

固然，要使用提交前的表單驗證也能夠，就是onChange

<input type="text" ref="text" onChange={this.change.bind(this)}/>