5.React中的事件绑定

1.基础事件绑定

语法：on+事件名={处理事件的函数}

<button onClick={alertTime}>点我</button>

例子

App.js

定义了一个 button，当用户点击按钮时会通过 alertTime 函数弹出当前的日期和时间。

function App() {

  function alertTime(){
    alert(new Date().toLocaleString())
  }

  return (
    <div className="App">
      
      <button onClick={alertTime}>点我</button>
      
    </div>
  );
}

export default App;

结果

点击按钮后：

2.传递自定义参数

语法:事件绑定的位置改造成箭头函数的写法，在执行点击处理程序实际处理业务函数的时候传递实参

onClick={()=>alertSum(1,2)}

注意:需要一个函数引用而不是直接调用函数，以确保事件处理器在事件发生时被正确调用，而不是在组件渲染时立即执行。

• 正确的写法: onClick={handleClick} 仅传递 handleClick 的引用，因此只有在按钮被点击时才会执行该函数。
• 错误的写法: onClick={handleClick()} 会立即执行 handleClick 函数，并将其返回值（undefined）传递给 onClick，这样按钮点击事件无法正常工作。

3.同时传递事件对象和自定义参数

语法:在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应

onClick={(event)=>handleClick('123',event)}

 例子

App.js

下面的代码实现：点击按钮时会调用 handleClick 函数，并传递自定义参数 '123' 和事件对象，从而在控制台打印出相关信息。

function App() {

  function handleClick(param,event){
    console.log('按钮被点击，参数：',param,event)
    
  }

  return (
    <div className="App">
      
      <button onClick={(event)=>handleClick('123',event)}>点我查看结果</button>
      
    </div>
  );
}

export default App;

结果

点击按钮后：

可以看到，点击按钮，函数正常调用执行