React非受控组件和受控组件

1.非受控组件

输入类的dom的值现用现取就是非受控组件，如下：

class Login extends React.Component{
handleSubmit = (event) {
event.preventDefault()
const {username,password} = this
alert(`用户名是:${username.value},密码是${password.value}`)
}
render(){
return (
<form onSubmit = {this.handleSubmit }>
用户名：<input ref = {c=>this.username = c name="username"}>
密码：<input ref = {c=>this.password= c name="password"}>
<button>登录</button>
)
}
}

2.受控组件

比非受控组件好，因为不用ref(ref尽量少用，有效率问题),把输入类的dom的值维护到state里，需要用的时候再从state里取

class Login extends React.Component{
state={
username:"",
password:""
}
saveUsername=(event)=>{
this.setState({username:event.target.value})
}
savePassword=(event)=>{
this.setState({password:event.target.value})
}
handleSubmit = (event) {
event.preventDefault()
const {username,password} = this.state
}
render(){
return (
<form onSubmit = {this.handleSubmit }>
用户名：<input onChange={this.saveUsername} name="username"}>
密码：<input onChange={this.savePassword} name="password"}>
<button>登录</button>
)
}
}

类似于Vue的v-model、。