React元素添加事件操作

添加点击事件的方法

<div onClick={()=>{}}></div> 可以直接在div中用箭头函数的形式添加点击事件，

function App() {
  const handelClick = (e) => {
    console.log(e)
  }
  return (
    <div>
      <div onClick={handelClick}>hekki Aoo</div>
    </div>
  )
}
export default App

先声明一个箭头函数再在元素中调用。

底层原理

打开控制台中打印的event

可以看到onClick虽然是一个融合事件，并且原生事件类型就是click 当然也有于元素事件不同的，比如另外添加一个事件onMouseEnter={handelMouse}native event却是type: "mouseover"，由此可见react融合后的事件与原生略有不同。

传参

当onClick={handelClick}onClick代表handelClick函数，当直接在添加事件函数时带括号onClick={handelClick(123)}，会导致onClick代表handelClick函数执行后的返回值，而handelClick并没有返回所以是undefined，那又如何传参呢？ 只要保证onClick后面的大括号是函数就可以 故有两种做法，高阶函数，和箭头函数，更推荐箭头函数

高阶：函数返回值还是一个函数

function App() {
  const handelClick2 = (num) => {
    return (e) => {
      console.log(num)
    }
  }
  return (
    <div>
      <div onClick={handelClick2(123)}>hekki Aoo</div>
    </div>
  )
}
export default App

弊端：当不传参时，为handelClick2没有接收到任何参数，所以num是undefined。

箭头函数*（推荐）*

function App() {
  const handelClick3 = (num, e) => {
    console.log(num, e)
  }
  return (
    <div>
      <div
        onClick={(e) => {
          handelClick3(123, e)
        }}
      >
        hekki Aoo
      </div>
    </div>
  )
}
export default App