react 約束性和非約束性組件

約束性 由react 管理了value(value再也不是死值,是this.state.value) 

當onChange 事件觸發以後,由 this.setState 決定value的值。約束性組件顯示的是 this.state.value的值。你能夠在handleChange中對用戶輸入的值作各類處理。
react

<input type="text"  value={this.state.value} onChange={(event)=>this.handleChange(event)}/>
 <h1>{this.state.value}</h1>

handleChange(event){
  console.log(event.target);
  this.setState({value:event.target.value})
};
複製代碼

 非約束性 value由原生的DOM管理的(defaultValue 至關於原生value屬性,value值是用戶輸入的值) 此時的值就是123bash

<input type="text"  defaultValue="123" />複製代碼

他倆的區別是ui

非約束性: 輸入wenwen -> input 中顯示wenwen
約束性:   輸入wenwen -> 觸發onChange事件 -> handleChange 中設置 this.setState({value:event.target.value})-> 渲染input使他的value變成wenwen複製代碼
相關文章
相關標籤/搜索