1.8 React元素是如何添加事件操作的

一、React添加事件操作

1. 基本操作

   function App() {
     const handlerClient = () => {
       console.log('1234')
     }
   
     return (
       <>
         <div>0987654321</div>
         <button onClick={handlerClient}>点击</button>
       </>
     )
   }
   
   export default App
   

2. event合成事件：点击事件可以获取点击时的全部操作参数，这个参数叫合成事件

   function App() {
     const handlerClient = (e: unknown) => {
       console.log(e)
     }
   
     return (
       <>
         <div>0987654321</div>
         <button onClick={handlerClient}>点击</button>
       </>
     )
   }
   
   export default App
   

   就是获取一个参数e，但是可以省略不写

3. 事件委托到容器：所有事件都在于根节点上

4. 传参处理：

   1. 箭头函数(推荐)：更加灵活，

   2. 高阶函数

   function App() {
     // 高阶用法
     const handlerClient = (num: number) => {
       return (e) => {
         console.log(num)
       }
     }
   
     // 箭头函数  推荐
     const handlerClient2 = (e, num: number) => {
       console.log(e, num)
     }
   
     return (
       <>
         {/* <div>0987654321</div>
         <button onClick={handlerClient}>点击</button> */}
         <button onClick={handlerClient(123)}>点击2</button>
         <button onClick={(e) => handlerClient2(e, 123)}>点击3</button>
       </>
     )
   }
   
   export default App
   

   注意：合成事件e可以忽略不写