受控组件
在HTML表单元素中，输入类的DOM，随着用户的输入，通过onChange事件和setState，将数据维护到state中，在需要时，从state中获取数据的组件，被称为受控组件
官方推荐表单尽量使用受控组件
受控组件类似于Vue中双向绑定的作用
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)=>{
// 通过state获取数据
const {
username,password} = this.state
alert(`你输入的用户名是：${
username},你输入的密码是：${
password}`)
}
render(){
return(
<form onSubmit={
this.handleSubmit}>
用户名：<input onChange={
this.saveUsername} type="text" name="username"/>
密码：<input onChange={
this.savePassword} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
非受控组件
与受控组件相对的，如果仅仅想要获取某个表单元素的值，并不关心他是如何改变的，可以通过获取DOM节点的方式来取值，通常使用ref，这种不依赖于state，现用现取的组件被称为非受控组件。
class Login extends React.Component{
handleSubmit = (event)=>{
// 通过ref获取数据，现用现取
const {
username,password} = this
alert(`你输入的用户名是：${
username.value},你输入的密码是：${
password.value}`)
}
render(){
return(
<form onSubmit={
this.handleSubmit}>
用户名：<input ref={
c => this.username = c} type="text" name="username"/>
密码：<input ref={
c => this.password = c} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}