React元素的事件处理和 DOM 元素的很相似，但是有一点语法上有所不同。
1.React与DOM事件处理比较
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
<!--React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<div>
<a href="https://www.baidu.com" onclick="javascript: return false;">百度(传统DOM方式)</a>
</div>
<script type="text/babel">
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('链接被点击');
}
return (
<a href="https://www.baidu.com" onClick={handleClick}>
百度
</a>
);
}
//渲染组件到页面
ReactDOM.render(<ActionLink />, document.getElementById('app'))
</script>
</body>
</html>
2.React中事件处理函数的定义
React中事件处理函数的定义方式有以下几种： - 使用ES6的箭头数 - 在构造函数中进行绑定：将事件处理函数作为类的成员函数 - 在render函数中绑定this
1).使用ES6的箭头数
在render函数中使用箭头函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
<!--React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
let app = document.getElementById('app');
//1.创建一个类组件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.state={
msg: '小爱同学'
}
}
render(){
return (
/*
* 在render函数中使用箭头函数：
优点：不用在构造函数中绑定this
缺点：当函数的逻辑比较复杂时,render就显得臃肿,无法直观的看到组件的UI结构,代码可读性差
* */
<div>
<button onClick= { ()=>{ console.log(this.state.msg)} } >点我</button>
</div>
)
}
}
//2.进行渲染
ReactDOM.render(<MyComponent/>,app)
</script>
</body>
</html>
使用class fields语法：将箭头函数赋给类的属性。 优点：不用在构造函数中绑定this,在render函数中调用简单。
<script type="text/babel">
let app = document.getElementById('app');
//1.创建一个类组件
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
msg: '小爱同学'
}
}
handleClick = () => { //将箭头函数赋给类的属性
console.log(this.state.msg) //将一个箭头函数赋值为handleClick，handleClick是MyComponent的一个属性
}
render() {
return (
/*
* 在render函数中使用箭头函数：
优点：不用在构造函数中绑定this
缺点：当函数的逻辑比较复杂时,render就显得臃肿,无法直观的看到组件的UI结构,代码可读性差
* */
<div>
<button onClick={this.handleClick}>点我</button>
</div>
)
}
}
//2.进行渲染
ReactDOM.render(<MyComponent/>, app)
</script>
2).在构造函数中进行绑定：将事件处理函数作为类的成员函数。 注意：在定义事件处理函数时,是无法识别this(即this是undefined的),必须在构造函数中绑定this。
<script type="text/babel">
let app = document.getElementById('app');
//1.创建一个类组件
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
msg: '小爱同学',
number: 0
}
this.add = this.add.bind(this) //this指针绑定到函数add里面去
}
handleClick = () => { //将箭头函数赋给类的属性
console.log(this.state.msg) //将一个箭头函数赋值为handleClick，handleClick是MyComponent的一个属性
}
add(){ //如果上述不绑定this，那么add函数里的this将无法识别
let num = this.state.number
num++
this.setState({
number: num
})
console.log(this.state.number)
}
render() {
return (
/*
* 在render函数中使用箭头函数：
优点：不用在构造函数中绑定this
缺点：当函数的逻辑比较复杂时,render就显得臃肿,无法直观的看到组件的UI结构,代码可读性差
* */
<div>
<button onClick={this.handleClick}>点我</button>
<button onClick= { this.add }>Number++</button>
</div>
)
}
}
//2.进行渲染
ReactDOM.render(<MyComponent/>, app)
</script>
3).在render函数中绑定this
<script type="text/babel">
let app = document.getElementById('app');
//1.创建一个类组件
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
msg: '小爱同学',
number: 0
}
//this.add = this.add.bind(this) //this指针绑定到函数add里面去
}
handleClick = () => { //将箭头函数赋给类的属性
console.log(this.state.msg) //将一个箭头函数赋值为handleClick，handleClick是MyComponent的一个属性
}
add(){ //如果上述不绑定this，那么add函数里的this将无法识别
let num = this.state.number
num++
this.setState({
number: num
})
console.log(this.state.number)
}
render() {
return (
/*
* 在render函数中使用箭头函数：
优点：不用在构造函数中绑定this
缺点：当函数的逻辑比较复杂时,render就显得臃肿,无法直观的看到组件的UI结构,代码可读性差
* */
<div>
<button onClick={this.handleClick}>点我</button>
<button onClick= { this.add.bind(this) }>Number++</button>
</div>
)
}
}
//2.进行渲染
ReactDOM.render(<MyComponent/>, app)
</script>
3.事件流
React的事件流默认是冒泡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
<!--React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
let app = document.getElementById('app')
//1.定义CSS样式
const style = {
child: {
width: '100px',
height: '100px',
backgroundColor: '#f58f98'
},
parent: {
width: '150px',
height: '150px',
backgroundColor: '#4e72b8'
},
ancestor: {
width: '200px',
height: '200px',
backgroundColor: '#84bf96'
}
}
/*
如果不阻止冒泡，输出child，parent，ancestor
*/
//2.定义类组件
class App extends React.Component{
render(){
return (
<div
onClick= { ()=>{ console.log('ancestor')}}
style = { style.ancestor }
>
<div
onClick={ ()=>{ console.log('parent')}}
style = { style.parent }
>
<div
onClick={ (e)=>{
console.log('child')
//e.stopPropagation() //阻止冒泡
}}
style = {style.child }
>
</div>
</div>
</div>
)
}
}
//3.渲染
ReactDOM.render(<App/>,app)
</script>
</body>
</html>