受控组件（受数据控制）
class Sum extends Component{
constructor(){
super();
this.state = {a:1,b:1}
}
// key表示的就是当前状态改的是哪一个
// e表示的是事件源
handleChange(key,e){ //处理多个输入框的值映射到状态的方法
this.setState({
[key]:parseInt(e.target.value)||0
})
}
render(){
return (
<div>
<input type="number" value={this.state.a} onChange={e=>{this.handleChange('a',e)}}/>
<input type="number" value={this.state.b} onChange={e=>{this.handleChange('b',e)}}/>
{this.state.a+this.state.b}
</div>
)
}
}
非受控组件（操作dom）
class Sum extends Component{
constructor(){
super();
this.state = {result:''}
}
//通过ref设置的属性 可以通过this.refs获取到对应的dom元素
handleChange = () =>{
let result = this.refs.a.value + this.b.value;
this.setState({result});
};
render(){
return (
<div onChange={this.handleChange}>
<input type="number" ref="a"/>
{/*x代表的真实的dom,把元素挂载在了当前实例上*/}
<input type="number" ref={(x)=>{
this.b = x;
}}/>
{this.state.result}
</div>
)
}
}
数据的双向绑定
class Input extends Component{
constructor(){
super();
this.state = {val:'100'}
}
handleChange = (e) =>{ //e是事件源
let val = e.target.value;
this.setState({val});
};
render(){
return (<div>
<input type="text" value={this.state.val} onChange={this.handleChange}/>
{this.state.val}
</div>)
}
}
