react 的事件绑定和事件对象

Posted 2021-12-20 冰雪奇缘lb

事件绑定

• React 事件绑定语法与 DOM 事件语法相似
• 语法：on+事件名称=事件处理程序，比如：onClick=0 =>
• 注意：React事件采用 驼峰命名法 ，比如：onMouseEnter、onFocus

---

类组件

class App extends React.Component 
    handleClick() 
        console.log('单击事件触发啦~')
    
    render() 
        return(
            <button onClick =  this.handleClick >点我呀</button>
        )
    


// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

---

函数组件

function App() 
    function handleClick() 
        console.log('单击事件出发啦~')
    
    return (
        <button onClick =  handleClick >点我呀</button>
    )


// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

区别：类组件监听调用函数需要加 this，函数组件不需要 this。

---

事件对象

• 可以通过 事件处理程序的参数 获取到事件对象
• React 中的事件对象叫做︰合成事件（对象)
• 合成事件︰兼容所有浏览器，无需担心跨浏览器兼容性问题

class App extends React.Component 
    handleClick(e) 
        // 阻止浏览器的默认行为
        e.preventDefault()
        console.log('单击事件触发啦~', e)
    
    render() 
        return(
            <a href="http://www.baidu.com/" onClick=this.handleClick>点我呀</a>
        )
    


// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))