React事件处理

1.事件绑定

注意点：

1. React事件绑定语法与DOM事件语法相似
2. 语法：on + 事件名称 = {事件处理程序}，比如：onClik = {（）=> {}}
3. 注意：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'))

2. React 事件对象

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

3.有状态组件和无状态组件

1. 函数组件又叫做无状态组件，类组件又叫做有状态组件；
2. 状态即数据
3. 函数组件没有自己的状态，只负责数据展示（静）
4. 类组件有自己的状态，负责更新UI,让页面“动”起来。

就是说你这个组件里面的数据如果是会发生变化的，就要用有状态组件。

4 . 组件中的 state 和 setState

4.1 state的基本使用

1. state–状态 即数据，是组件内部的私有数据，只能在组件内部使用。
2. state的值是对象，表示一个组件中可以有多个数据
3. 获取状态：this.state

// state的基本使用
class Hello extends React.Component {
   
    // constructor() {
   
    //     super() 
    //         // 初始化state
    //     th