可控組件和不可控組件：
在React中的input標(biāo)簽是有些小坑的，input本身就有自己的緩存機(jī)制露乏，然后React的State也有緩存機(jī)制碧浊。這兩種緩存機(jī)制我們?cè)诰幋a中是要進(jìn)行取舍的。將input中的value綁定到state的React組件就是可控組件瘟仿，反之則是不可控組件箱锐。
可控組件：
在render()函數(shù)中設(shè)置了value的值是一個(gè)功能受限的組件，渲染出來(lái)的HTML元素始終保持value屬性的值劳较，即使用戶輸入也不會(huì)改變驹止。
class MyForm extends React.Component{
render(){
return(
<div>
<input type="text" value="React教程"}/>
</div>
)
}
}
這時(shí)候你在瀏覽器中打開(kāi)的React教程這個(gè)值是不可變的，甚至連刪除都刪除不了观蜗，這是由React的渲染策略決定的臊恋。如果要寫(xiě)成功能正常和可用性組件，我們需要編寫(xiě)onChange事件嫂便，并將value綁定到state中捞镰。
class MyForm extends React.Component{
constructor(props){
super(props);
this.state={value:'React教程'}
};
handleChange(event){
this.setState({
value:event.target.value
});
console.log(this.state.value);
}
render(){
return(
<div>
<input type="text" value={this.state.value} onChange={this.handleChange.bind(this)}/>
</div>
)
}
}
ReactDOM.render(
<MyForm />,
document.getElementById('root')
);
在情況允許的條件下闸与，我們應(yīng)該優(yōu)先考慮編寫(xiě)可控組件毙替。
可控組件的有點(diǎn)：
- 符合React單向數(shù)據(jù)流特性，即從state流向render輸出的結(jié)果践樱。
- 數(shù)據(jù)存儲(chǔ)在state中厂画，便于訪問(wèn)和處理。
不可控組件
在input標(biāo)簽中不把value綁定到state上的就是不可控組件拷邢，它的數(shù)據(jù)不與state對(duì)應(yīng)袱院，所以在開(kāi)發(fā)時(shí)會(huì)給自己挖很多坑，但是不可控組件并不是不可掌控，下面我們了解一下不可控組件的小技巧忽洛。
我們先來(lái)做一個(gè)最簡(jiǎn)單的不可用組件腻惠。
class MyForm extends React.Component{
render(){
return(
<div>
<input type="text"/>
</div>
)
}
}
組件完成之后給它加上一個(gè)onChange事件，發(fā)現(xiàn)是可以監(jiān)控到變化值的欲虚。如果要獲得iput中的value值集灌，需先拿到其DOM節(jié)點(diǎn)，然后獲取其value值复哆。
class MyForm extends React.Component{
handleChange(){
const inputValue=ReactDOM.findDOMNode(this.refs.React).value;
console.log(inputValue);
}
render(){
return(
<div>
<input type="text" onChange={this.handleChange.bind(this)} ref="React"/>
</div>
)
}
};
上面的方法太過(guò)于繁瑣欣喧，而且不可復(fù)用，所以我們還是采取給input加入默認(rèn)值的方式梯找，但是不是value了唆阿，而是defaultValue。
class MyForm extends React.Component{
render(){
return(
<div>
<input type="text" defaultValue="默認(rèn)值"/>
</div>
)
}
}
