React 事件处理

1、事件绑定

　　React 事件绑定语法与DOM事件语法类似。

　　语法：on+事件名称=（事件处理程序），比如：onClick = { ()=> {} }

　　注意：React 事件采用驼峰命名法，比如：onMouseEnter、onFocus

在类组件中绑定事件

class App extends React.Component {
    // 事件处理程序
    handleClick() {
        console.log('单击事件触发了')
    }
    render() {
        return (
            <button onClick={ this.handleClick }>123</button>
        )
    }
}
ReactDOM.render(<App/>, document.getElementById('root'))

在函数组件中绑定事件

function App() {
    function handleClick() {
        console.log('事件触发啦')
    }
    return (
        <button onClick={ handleClick }>AppFun</button>
    )
}
ReactDOM.render(<App/>, document.getElementById('root'))

2、事件对象

　　可以通过事件处理程序的参数（e）获取到事件对象

　　React 中的事件对象叫做：合成事件（对象）

　　合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

class App extends React.Component {
    // 事件处理程序
    handleClick(e) {
        console.log('事件对象',e)
        // 阻止浏览器默认行为
        e.preventDefault();
    }
    render() {
        return (
            <a href="https://www.baidu.com" onClick={ this.handleClick }>点我，不会跳转页面</a>
        )
    }
}