事件绑定

事件绑定

export default function App() {
  const handler = () => {
    console.log("按钮点击了");
  };
  return (
    <div>
      <button onClick={handler}>按钮</button>
    </div>
  );
}

使用事件对象参数

export default function App() {
  const handler = (e) => {
    console.log("事件对象", e);
  };
  return (
    <div>
      <button onClick={handler}>按钮</button>
    </div>
  );
}

传递自定义参数

// 注意：不能直接写函数调用，事件绑定位置改造成箭头函数的写法
export default function App() {
  const handler = (param) => {
    console.log(param);
  };
  return (
    <div>
      <button onClick={() => handler("dancy")}>按钮</button>
    </div>
  );
}

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

// 注意：不能直接写函数调用，事件绑定位置改造成箭头函数的写法
export default function App() {
  const handler = (param, e) => {
    console.log(param, e);
  };
  return (
    <div>
      <button onClick={(e) => handler("dancy", e)}>按钮</button>
    </div>
  );
}