0
点赞
收藏
分享

微信扫一扫

React中事件的绑定

事件绑定

语法:on +事件名= { ()=>{
do something
}}

<!-- 点击事件 -->
onClick={ () => { } }
注意的是:React采用的是驼峰命名法。

需要注意的是:在类组件中和函数组件中绑定事件是不同的哈

在类组件中绑定事件

<!-- 点击事件 -->
import React from "react";
class Hello extends React.Component{
render() {
return (
<div onClick={ this.sayFunc}>我是类组件</div>
)
}
sayFunc() {
console.log('我被触发了')
}
}
export default Hello

在函数组件中触发事件

import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
function SayHi() {
function sayContHander() {
console.log('我被触发了');
}
return (
<button onClick={sayContHander}>我是函数组件</button>
)
}
ReactDOM.render(<SayHi/>, document.getElementById('root'))

事件对象

通过事件处理程序的参数,获取到事件对象。
React中的事件对象叫做:合成事件
合成事件:兼容所有的浏览器,不需要担心浏览器的兼容性问题

事件对象

import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
class SayHi extends React.Component {
sayContHander(e) {
// 阻止浏览器的默认行为。表现为点击后不会跳转到B站。
e.preventDefault()
// 如果没有preventDefault,那么点击后会跳转
console.log('我被触发了');
}
render() {
// render函数返回的jsx推荐使用小括号包围。
// 或者说jsx返回来的使用小括号包围
return (
<a href='https://www.bilibili.com/' onClick={this.sayContHander}>不会跳转到B站</a>
)
}
}
ReactDOM.render(<SayHi/>, document.getElementById('root'))

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。



作者:晚来南风晚相识

如果文中有什么错误,欢迎指出。以免更多的人被误导。

举报

相关推荐

0 条评论