react 约束性和非约束性组件

约束性 由react 管理了value（value再也不是死值，是this.state.value） 

当onChange 事件触发以后，由 this.setState 决定value的值。约束性组件显示的是 this.state.value的值。你能够在handleChange中对用户输入的值作各类处理。

<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值是用户输入的值） 此时的值就是123

<input type="text"  defaultValue="123" />复制代码

他俩的区别是

非约束性： 输入wenwen -> input 中显示wenwen
约束性：   输入wenwen -> 触发onChange事件 -> handleChange 中设置 this.setState({value:event.target.value})-> 渲染input使他的value变成wenwen复制代码