1.最简单的受控组件(输入框的值改变,导致onChange事件发生,导致state里面的str被重新赋值,输入框的值受state控制,所以是受控组件)
import React, { Component } from 'react'
export default class Control extends Component {
constructor(props){
super(props);
this.state ={
str:''
}
}
change=(e)=>{
this.setState({
str:e.target.value
})
}
render() {
return (
<div>
<input type="text" id="str" value={this.state.str} onChange={this.change} />
{this.state.str}
</div>
)
}
}
2.上面只是一个输入框,如果输入框增多,那么只需要这样就好[e.target.id]这个id和输入框的id相同
import React, { Component } from 'react'
export default class Control extends Component {
constructor(props){
super(props);
this.state ={
str:''
}
}
change=(e)=>{
this.setState({
[e.target.id]:e.target.value
})
}
render() {
return (
<div>
<input type="text" id="str" value={this.state.str} onChange={this.change} />
{this.state.str}
<input type="text" id="password" value={this.state.password} onChange={this.change} />
{this.state.password}
</div>
)
}
}
2.绑定更多的表单元素
import React, { Component } from 'react'
export default class Control extends Component {
constructor(props){
super(props);
this.state ={
str:'',
password:"",
city:"北京",
sex:'male',
vip:true
}
}
change=(e)=>{
this.setState({
[e.target.id]:e.target.id==="vip"?e.target.checked:e.target.value
})
}
render() {
return (
<div>
<input type="text" id="str" value={this.state.str} onChange={this.change} />
{this.state.str}
<input type="text" id="password" value={this.state.password} onChange={this.change} />
{this.state.password}
<select id="city" value={this.state.city} onChange={this.change}>
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
{this.state.city}
<input type='radio' value="male" id="sex"
checked={this.state.sex==="male"?true:false} onChange={this.change}
/>男
<input type='radio' value="female" id="sex"
checked={this.state.sex==="female"?true:false} onChange={this.change}
/>女
{this.state.sex}
<input type="checkbox" id="vip" checked={this.state.vip}
onChange={this.change} />
{this.state.vip?"是":"不是"}vip 会员
</div>
)
}
}