这一篇文章说说 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>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
上面有两个按钮,分别是 "原生事件" 按钮 和 "React 合成事件" 按钮,点击按钮时分别触发原生事件和 React 合成事件。
原生事件输出如下:
React 合成事件输出如下:
3,React 中的事件是通过事件委托方式处理的
React 将几乎所有的事件都注册在 document 上,并指定统一的回调函数 dispatchEvent。
但有些事件是 document 所不具有的,比如 audio、video 标签的一些媒体事件(如 onplay、onpause 等),这些事件只能够在这些标签上进行事件注册,但回调函数依旧使用 dispatchEvent。
有关 React 事件的深入解读可以看这篇博客。