受控組件:表單元素(input.textarea,selection)的值由React組件控制乎澄。
比如說(shuō):常見(jiàn)的場(chǎng)景:留言板上棉磨,使用react組件子檀,通過(guò)操作setState()方法來(lái)修改input輸入框的值浴韭,最后由state對(duì)象來(lái)保存變化后的值客叉。
react官方也是推薦使用受控組件诵竭。總結(jié)下react組件更新state的整個(gè)流程:
可以通過(guò)初始化設(shè)置state的默認(rèn)值十办;
每當(dāng)表單值發(fā)生變化時(shí)秀撇,就要調(diào)用onchange方法處理事件
一定不能忘記在初始化的時(shí)候超棺,把this指向事件調(diào)用對(duì)象向族。
通過(guò)this.setState設(shè)置數(shù)據(jù), 事件處理拿到event改變后的狀態(tài)棠绘,觸發(fā)視圖重新渲染
具體代碼如下:
頁(yè)面渲染:(雖然有點(diǎn)丑件相,沒(méi)有去添加樣式)
react組件是單向數(shù)據(jù)流,由代碼可見(jiàn)氧苍,數(shù)據(jù)是在state中初始化出來(lái)的夜矗,通過(guò)props傳值,使用handleChange()
方法让虐,把新的表單數(shù)據(jù)又傳回state.