react 的事件绑定和事件对象

事件绑定

• 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"))