React学习--react中的事件处理(受控组件与非受控组件)

• 通过onXxx属性指定事件处理函数（注意大小写）
  a.React使用的是自定义（合成）事件，而不是使用原生的DOM事件 ----- 为了更好的兼容性
  b.React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）----- 为了更高效

• 尽量减少ref的使用：如果发生事件的元素正好是要操作的元素，可以省略ref，通过event.target得到发生事件的DOM元素对象

class Demo extends React.Component{
	showData = (event) => {
		alert(event.target.value)
	}
	render(){
		return(
			<div>
				//	发生事件的元素正好是要操作的元素时，可以省略ref
				<input type="text" onBlur={this.showData} />
			</div>
		)
	}
}

一.非受控组件

输入类节点现用现取

<div id="test"></div>
<script type="text/babel">
class Login extends React.Component{
	handleSubmit = (event) => {
		event.preventDefault() //阻止表单提交
		const {username,password} = this
		alert(`用户名为：${username.value}，密码为：${password.value}`)
	}
	render(){
		return(
			<form action="地址"  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>
		)
	}
}
ReactDOM.render(<Login />,document.getElementById('test'))
</script>

表单元素<form>会默认跳转到新的action指定的页面，如果无action则会导致当前页面自动刷新，而event.preventDefault()会阻止表单提交，即页面不刷新

二.受控组件

随着输入维护状态

<div id="test"></div>
<script type="text/babel">
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
		alert(`用户名为：${username}，密码为：${password}`)
	}
	render(){
		return(
			<form action="地址"  onSubmit={this.handleSubmit}>
				用户名：<input onChange={this.saveUsername} type="text" name="username" />
				密码：<input onChange={this.savePassword} type="password" name="password" />
				<button>登陆</button>
			</form>
		)
	}
}
ReactDOM.render(<Login />,document.getElementById('test'))
</script>

受控组件的优势在于可以省略ref，React官网建议不要过度使用ref