React中事件的绑定

事件绑定

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


onClick={ () => { } }
注意的是：React采用的是驼峰命名法。

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

在类组件中绑定事件

import React from "react";
class Hello extends React.Component{
    render() { 
        return (
            
我是类组件
        )
    }
    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 (
        我是函数组件
    )
}
ReactDOM.render(, 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 (
            不会跳转到B站
        )
    }
}
ReactDOM.render(, document.getElementById('root'))