约束性 由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