04.事件绑定

基础事件绑定

语法: on + 事件名称 ={事件处理程序}，整体上遵循驼峰命名法

Text Only

function App() {
  const handleClick=()=>{
    console.log('button 被点击了');
  }
  return (
   <div className="App">
      <button onClick={handleClick}>Click me</button>
   </div>
  );
}

export default App;

事件对象参数

语法：在事件回调函数中设置形参e

Text Only

function App() {
  const handleClick=(e)=>{
    console.log('button 被点击了',e);
  }
  return (
   <div className="App">
      <button onClick={handleClick}>Click me</button>
   </div>
  );
}

export default App;

Bash

button 被点击了 
Object { _reactName: "onClick", _targetInst: null, type: "click", nativeEvent: click, target: button, currentTarget: button, eventPhase: 3, bubbles: true, cancelable: true, timeStamp: 9715, … }

传递自定义参数

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

Text Only

function App() {
  const handleClick=(name)=>{
    console.log('button 被点击了',name);
  }
  return (
   <div className="App">
      <button onClick={()=>handleClick('lucy')}>Click me</button>
   </div>
  );
}

export default App;

注意:不能直接写函数调用，这里事件绑定需要一个函数引用

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

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

Text Only

function App() {
  const handleClick=(name,e)=>{
    console.log('button 被点击了',name,e);
  }
  return (
   <div className="App">
      <button onClick={(e)=>handleClick('lucy',e)}>Click me</button>
   </div>
  );
}

export default App;