目录
(1)React事件的命名方式:小驼峰方式,DOM的命名方式是小写
(2)事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值
(2)在定义UI控件时使用data自定义属性,在事件处理函数中通过'e.target.dataset.属性名'来获取UI控件中的data属性值
(2)React中使用捕获方式:事件类型后面加一个后缀Capture
一、React的事件处理
1、与DOM事件处理的不同之处
(1)React事件的命名方式:小驼峰方式,DOM的命名方式是小写
例如:DOM的命名:onclick
React的命名:onClick
(2)事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值
例如:DOM以字符串方式:onclick = "handleClick()"
React以对象方式:onClick = { handleClick }
(3)阻止默认事件的方式不同
DOM通过返回false来阻止: <a href="www.baidu.com" οnclick="javascript:return false;">百度</a>
React需要显式调用e.preventDefault来阻止
2、React中事件处理函数的定义
(1)使用ES6的箭头数
①在render函数中使用箭头函数:
Ⅰ、优点:不用在构造函数中绑定this
Ⅱ、缺点:当函数的逻辑比较复杂时,render就显得臃肿,无法直观的看到组件的UI结构,代码可读性差
<!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>事件处理函数-->在render中使用箭头函数</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.创建一个类组件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.state={
msg: '小森同学'
}
}
render(){
return (
<div>
<button onClick= { ()=>{ console.log(this.state.msg)} } >点我</button>
</div>
)
}
}
//2.进行渲染
ReactDOM.render(<MyComponent/>,root)
</script>
</body>
</html>
②使用class fields语法:将箭头函数赋给类的属性
Ⅰ、优点:不用在构造函数中绑定this,在render函数中调用简单
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.创建一个类组件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.state={
msg: '小沈同学',
number: 0
}
}
handleClick = ()=>{ //将箭头函数赋给类的属性
console.log(this.state.msg) //将一个箭头函数赋值为handleClick,handleClick是MyComponent的一个属性
}
render(){
console.log('render')
return (
<div>
<button onClick= { this.handleClick } >点我</button> //调用这个属性
</div>
)
}
}
//2.进行渲染
ReactDOM.render(<MyComponent/>,root)
</script>
</body>
(2)在构造函数中进行绑定:将事件处理函数作为类的成员函数
注意:在定义事件处理函数时,是无法识别this(即this是undefined的),必须在构造函数中绑定this
①、优点:在render函数调用时不需要重新创建事件处理函数
②、缺点:当事件处理很多时,构造函数就显的很繁琐
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.创建一个类组件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.state={
msg: '小沈同学',
number: 0
}
this.add = this.add.bind(this) //this指针绑定到函数add里面去
}
handleClick