1:受状态控制的组件,必须要有onchange方法,否则不能使用
2:受控组件可以赋予默认值(官方推荐使用受控组件)
// 实现数据双向绑定
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'))
鉴于受控组件与非受控组件的特点,二者应用的地方也有所不同,主要表现在:
受控元素,一般用在需要动态设置其初始值的情况;例如某些form表单信息编辑时,input表单元素需要初始显示服务器返回的某个值然后进行编辑。
非受控元素, 一般用于无任何动态初始值信息的情况; 例如form表单创建信息时,input表单元素都没有初始值,需要用户输入的情况