（一）初始 react
# ?一、事件处理
class Demo {
MyRef = React.createRef()
showInfo = () => {
console.log('xxx')
}
render() {
return(
<div>
<input onBlur={this.showInfo} ref={this.MyRef} type="text" placeholder="点击按钮提示信息"/>
</div>
)
}
}
ReactDOM.render(<Demo/>, document.getElmentById('test'))# 二、不能动不动就使用 ref 像上面这种 ref 其实可以使用事件处理的方式来实现
class Demo {
showInfo = (event) => {
console.log(event)
}
render() {
return(
<div>
<input onBlur={this.showInfo} type="text" placeholder="点击按钮提示信息"/>
</div>
)
}
}
- 当发生事件的元素就是我们要操作的元素的时候就可以省略掉
ref
# ?总结
# 一、通过 onXxx 属性指定事件处理函数，注意大小写
React 中使用的是自定义（合成）事件，而不是使用的原生的 DOM 事件
- 为什么要这样做：是为了更好的兼容性
React 中的事件是通过事件委托方式处理的（委托给组加你最外层的元素）
- 事件委托的原理就是 事件冒泡
- 问什么要使用事件委托呢：为的是高效，就像下面这个例子
<!-- 这里采用事件冒泡，也叫事件委托的形式，在 ul 身上处理点击事件，而不是每一个 li 单独去添加 -->
<ul onclick="xxxx">
<li>首页</li>
<li>个人中心</li>
<li>关于</li>
</ul># 二、通过 event.target 得到发生事件的 DOM 元素对象
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022年12月25日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录