React 事件
不同于原生的DOM事件
- 自己封装的事件，提高兼容性
- 委托于组件外层元素，提高效率
- onclick----->onClick，事件发生时，传入事件对象event; event.target触发事件的元素。通过event.target获取节点对象，避免过度使用refs
案例
表单提交数据
非受控组件
用数据时，再去取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非受控组件</title>
<!-- 现用现取，使用refs获取节点，获取对应的值 -->
</head>
<body>
<!-- 非受控组件 -->
<!-- 导入react库 -->
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<!-- container -->
<div id="container"></div>
<!-- 创建虚拟DOM -->
<script type="text/babel">
class Login extends React.Component{
dealSub = (event)=>{
alert("submit data ....");
//表单提交后，自动刷新当前 整个页面
alert(`用户名：${this.username.value};密码：${this.pwd.value}`)
//阻止表单提交
event.preventDefault()
}
render(){
return (
<form action="http://www.baidu.com" method="get" onSubmit={this.dealSub}>
<input type="text" name="username" placeholder="输入用户名" ref={(c)=>{this.username=c}}/>
<input type="password" name="pwd" placeholder="输入密码" ref={(c)=>{this.pwd=c}}/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById("container"))
</script>
</body>
</html>
受控组件
获取所有数据，放入state属性，用时从state中获取，受state控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>受控组件</title>
<!-- 现用现取，使用refs获取节点，获取对应的值 -->
</head>
<body>
<!-- 受控组件 -->
<!-- 导入react库 -->
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<!-- container -->
<div id="container"></div>
<!-- 创建虚拟DOM -->
<script type="text/babel">
class Login extends React.Component{
dealSub = (event)=>{
alert("submit data ....");
//表单提交后，自动刷新当前 整个页面
alert(`用户名：${this.username.value};密码：${this.pwd.value}`)
//阻止表单提交
event.preventDefault()
}
render(){
return (
<form action="http://www.baidu.com" method="get" onSubmit={this.dealSub}>
<input type="text" name="username" placeholder="输入用户名" ref={(c)=>{this.username=c}}/>
<input type="password" name="pwd" placeholder="输入密码" ref={(c)=>{this.pwd=c}}/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById("container"))
</script>
</body>
</html>
上一篇：js框架----react.js 5 类组件的实例属性refs 下一篇：