React_6 React事件处理

1.事件绑定

React事件绑定语法与DOM事件语法相似

语法：on+事件名称={ 事件处理程序 }

如：onClick={()=>{}}

//函数组件
function App(){
    function handClick(){
        alert('单击事件被触发了')
    }
    return (
        <button onClick={handClick}>点击</button>
    )
}


//类组件
class App extends React.Component{
    handClick(){
        alert('单击事件被触发了')
    }
    render(){
        return (
            <button onClick={this.handClick}>点击</button>
        )
    }
}


ReactDOM.render(<App/>,document.getElementById('root'));

注意：React事件采用驼峰命名法 如：onMouseEnter 、onFocus等；函数组件与类组件绑定事件方式不大相同，注意区分！

2.事件对象

我们可以通过事件处理程序的参数获取到事件对象

React中的事件对象叫做：合成事件(对象)

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

class App extends React.Component{
   handClick(e){
        // 阻止浏览器默认行为
        e.preventDefault()
        alert('跳转事件被触发了')
    }
    render(){
        return (
            <a href='http://www.baidu.com' onClick={this.handClick}>点击跳转百度</a>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'));