React 事件绑定的使用

// 导入
import { createRoot } from "react-dom/client";
import "./index.css";

// React 事件绑定的使用，整体是遵循的驼峰命名法
// 语法： on + 事件名称 = {事件处理程序}

const root = createRoot(document.querySelector("#root"));

const handleIncident = (e) => {
  // 阻止默认跳转
  e.preventDefault();
  alert("千手修罗");
};

root.render(
  <div>
    {/* 事件绑定 */}
    <div className="box" onClick={() => console.log("大风")}></div>

    {/* 事件对象 */}
    <a
      href="https://juejin.cn/post/7258201505337360441"
      onClick={(e) => {
        // 阻止默认跳转
        e.preventDefault();
        alert("千手观音");
      }}
    >
      千面佛
    </a>

    {/* 抽离事件处理程序，单独使用 */}
    <a
      href="https://juejin.cn/post/7258201505337360441"
      onClick={handleIncident}
    >
      千手修罗
    </a>

    {/* 错误使用：抽离事件处理程序，加上括号是立即调用的意思，在页面创建之后立即调用，所以会直接报错 */}
    {/* <a
      href="https://juejin.cn/post/7258201505337360441"
      onClick={handleIncident()}
    >
      错误：千手修罗
    </a> */}
  </div>
);