理解受控组件和非受控组件

受控组件

在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>
		)
	}
}