【React】React 事件绑定 、事件对象

事件绑定

//class内
class App extends React.Component {
  useclick () {
    console.log(`我被点击了`)
  }

  render () {
    return <button onClick={this.useclick}>触发绑定事件</button>
  }
}

//在函数内
function App () {
  function useclick () {
    console.log(`我被点击了`)
  }

  return <button onClick={useclick}>触发绑定事件</button>
}

描述:

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

语法：on + 事件名称 = 事件处理函数 

注意: React事件采用驼峰命名法

其他：

需要注意在React绑定事件需要遵循驼峰命名法

类组件与函数组件绑定事件是差不多的

在类组件中绑定事件函数的时候需要用到this 代表指向当前类的引用

在函数中不需要使用this

事件方法总结参考：

js事件总结 - 掘金什么是事件 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，是可以被 JavaScript 侦测到的行为https://juejin.cn/post/7012193776680566797

事件对象

class App extends React.Component {
    clickHandle(e){
        // 获取原生事件对象
        console.log(e.nativeEvent)
    }
    render(){
        return (
            <div>
  <button onClick = {this.clickHandle}>
     点我点我点我
   </button>
            </div>
        )
    }
} 

描述:

1.通过事件处理函数的参数获取到事件处理对象

2.React内的事件对象叫做：合成事件

合成事件表示兼容所有浏览器 不需要担心跨浏览器兼容问题

除了兼容浏览器以外还拥有原生事件相同的接口 比如: preventDefaule() 阻止默认事件 和 stopPropagation()  阻止冒泡