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'))