1.17 受控组件和非受控组件

// 实现数据双向绑定
import React,{Component} from 'react'
import ReactDOM from 'react-dom'

class Input extends Component{
constructor(){
super()
this.state={
val:100
}
}
//e是事件源
handleChange=(e)=>{
let val=e.target.value
this.setState({val:val})
}
render(){
return(
<div>
<input type="text" value={this.state.val} onChange={this.handleChange}/>
{this.state.val}
</div>
)
}
}
ReactDOM.render(<Input></Input> ,document.getElementById('root'))

// 受控组件
import React,{Component} from 'react'
import ReactDOM from 'react-dom'

class Sum extends Component{
constructor(){
super()
//这里必须是state
this.state={
val1:1,
val2:1,
}
}
change(arg,e){
// 第一种写法
// if(arg==1){
//     this.setState({
//         val1: parseInt(e.target.value)
//     })
// }
// else if(arg==2){
//     this.setState({
//         val2:parseInt(e.target.value)
//     })
// }
// 第2种写法
this.setState({
['val'+arg]:parseInt(e.target.value)
})
}
render(){
return(
<div>
<input type="text" value={this.state.val1} onChange={(e)=>{this.change(1,e)}}/>
<input type="text" value={this.state.val2} onChange={(e)=>{this.change(2,e)}}/>
<p>{this.state.val1 + this.state.val2 }</p>
</div>
)
}
}
ReactDOM.render(<Sum></Sum> ,document.getElementById('root'))

// 非受控组件，操作DOM
import React,{Component} from 'react'
import ReactDOM from 'react-dom'
//输入框value不受状态控制，不能初始化默认值
class Sum extends Component{
constructor(){
super()
//这里必须是state
this.state={
result:''
}
}
//这里不能写成handleChange() {
handleChange=()=>{
// 通过ref设置的属性，可以通过this.refs获取到对应的DOM元素
let result=this.refs.a.value + this.refs.b.value
//第二种写法
// let result= this.c.value
this.setState({
result
})
}
render(){
return(
<div onChange={this.handleChange}>
<input type="number" ref={'a'}/>
<input type="number" ref={'b'}/>
{/*x代表真实的DOM*/}
{/*<input type="number" ref={x=>{ this.c=x }}/>*/}
<p>{this.state.result }</p>
</div>
)
}
}
ReactDOM.render(<Sum></Sum> ,document.getElementById('root'))