React中事件的绑定

原创

朦胧淡月 2022-09-01 17:20:06 博主文章分类：React ©著作权

©著作权归作者所有：来自51CTO博客作者朦胧淡月的原创作品，请联系作者获取转载授权，否则将追究法律责任

事件绑定

语法：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'))