事件处理

1. 使用HTML内置事件

比如原生常见事件有click,mouseOver等，监听鼠标点击：

import {useState} from 'react'
import './App.css'

function App() {
    const [count, setCount] = useState(0)
    const clickHandler = (e) => {
      console.log("e", e)
      setCount(count + 1)
    }
    return (
        <>
            <h1>Vite + React</h1>
            <div className="card">
              {/*test */}
                <button  onClick={clickHandler}>
                  count is {count}
                </button>
            </div>
        </>
    )
}

export default App

会发现打印的React中点击事件并不是原生事件，而是一个封装合成事件：
可以看到里面有一个nativeEvent属性，它就是原生事件，但也不能完全认为是原生事件和我们想要的事件处理保持一致：
我们也不能直接就认为React封装的事件对象和nativeEvent属性是保持一致的，比如我们监听的是mouseEnter事件，结果底层是处理的事件类型为mouseOver，如果发现事件处理和我们想的不一样，可以查看原生和合成事件是否一致。

2. 传参处理

传参处理方式有两种：

• 普通箭头函数处理
• 高阶函数处理(所谓高阶函数就是函数返回值还是一个函数)

2.1 箭头函数处理

import './App.css'

function App() {
  // 普通函数
  const clickHandler1 = (e, num) => {
    console.log(num)
    console.log(e)
  }
  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={(e) => clickHandler1(e, 123)}>点击111</button>
      </div>
    </>
  )
}

export default App

2.2 高阶函数处理

import './App.css'

function App() {
  const clickHandler2 = (num) => {
    return (e)=>{
      console.log(num)
      console.log(e)
    }
  }
  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={clickHandler2(123)}>点击222</button>
      </div>
    </>
  )
}
export default App

官方推荐使用箭头函数处理传参情景。