React 学习笔记（11）：事件处理

最新推荐文章于 2024-02-03 10:36:00 发布

纷飞丿

最新推荐文章于 2024-02-03 10:36:00 发布

阅读量406

点赞数

分类专栏： react学习笔记文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/f18855666661/article/details/122996986

版权

react学习笔记专栏收录该内容

16 篇文章 6 订阅

订阅专栏

本文探讨了React中事件处理的几个关键点：1) 使用onXxx形式绑定回调函数；2) React事件并非原生DOM事件，而是自定义事件，具有更好的兼容性；3) 事件通过事件委托在document上处理，回调函数为dispatchEvent。通过实例展示了React事件与原生事件的区别，揭示了React事件系统的内部工作原理。

摘要由CSDN通过智能技术生成

这一篇文章说说 React 中的事件应该注意的点。

1，通过 onXxx 指定回调函数

绑定事件的写法如下所示：

class Demo extends React.Component{
	showData = (event) => {}

	render(){
		return(
			<div>
				<button onClick={this.showData}>点我提示左侧的数据</button>
			</div>
		)
	}
}

事件名的首字母要大写。

2，React 中的事件（event）不是原生 DOM 事件

React 中使用的是自定义事件，而不是原生 DOM 事件，这样做的目的是为了更好的兼容性，看下面的代码：

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<button id="testbtn">原生事件</button>

	<script type="text/babel">
		let testBtn = document.getElementById("testbtn")
		testBtn.addEventListener('click',function (event) {
			console.log(event)
        })

		//创建组件
		class Demo extends React.Component{
			showData = (event)=>{
			  console.log(event)
			}

			render(){
				return(
					<div>
						<button onClick={this.showData}>React 合成事件</button>&nbsp;
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo/>,document.getElementById('test'))
	</script>
</body>

上面有两个按钮，分别是 "原生事件" 按钮和 "React 合成事件" 按钮，点击按钮时分别触发原生事件和 React 合成事件。

原生事件输出如下：