表单内容--受控组件/非受控组件

受控组件

点击提交上传数据

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

非受控组件

实时改变的

class Login extends React.Component{
//初始化状态
state = {
	username:'',
	password:''
}
	handleSubmit = () = >{
		const {username,password} = this
		alert(`你输入用户名是：${username.value}`,`你的密码是：${password.value}`) 
	}
	saveuserName = (event)=>{
		this.setState({username:event.target.value})
	}
	render(){
		return{
		 <form action="" onSubmit="handleSubmit ">
		 	用户名:<input onChange={this.saveuserName} name="username" type="text" />
		 	密码：<input ref = {c => this.password=c}/>
		 	<button>登录</button>
		 </form>
		}
	}
}