【07】基础知识:React中的事件处理

React 中 通过 onXxx 属性指定事件处理函数(注意大小写),通过 event.target 得到发生事件的 DOM 元素对象

不要过度使用 ref (比如,元素获取自身属性时,通过 event 对象,而不是 ref)

原理

为了更好的兼容性:React 使用的是自定义(合成)事件,而不是使用的原生 DOM 事件

为了的高效:React 中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

code:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom,用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel,用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		// 创建组件
		class Demo extends React.Component {
			// 创建ref容器
			myRef = React.createRef()
			myRef2 = React.createRef()

			// 展示左侧输入框的数据
			showData = (event) => {
				console.log('left', event) // event 为 按钮
				alert(this.myRef.current.value)
			}

			// 展示右侧输入框的数据
			showData2 = (event) => {
				console.log('right', event) // event 为 右侧 input
				alert(event.target.value)
			}

			render() {
				return (
					<div> {/* 事件委托机制,React会把事件加在最外层元素,div 身上 */}
						<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />&nbsp;
					</div>
				)
			}
		}
		// 渲染组件到页面
		ReactDOM.render(<Demo />, document.getElementById('test'))
	</script>
</body>

</html>
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架