event 用 ts 类型声明

一、DOM 事件类型声明示例

1. 鼠标点击事件(`MouseEvent`)

使用 React.MouseEvent<HTMLButtonElement> 定义

javascript 复制代码
import React from "react";



const MyComponent: React.FC = () => {

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {

    // 这里可以访问MouseEvent的相关属性,比如获取鼠标点击的坐标

    console.log("Client X:", event.clientX);

    console.log("Client Y:", event.clientY);

  };



  return <button onClick={handleClick}>Click Me</button>;

};



export default MyComponent;

2. 键盘输入事件(`KeyboardEvent`)

使用 React.KeyboardEvent<HTMLInputElement> 定义

javascript 复制代码
import React from "react";



const MyComponent: React.FC = () => {

  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {

    if (event.key === "Enter") {

      console.log("用户按下了回车键");

    }

  };



  return <input onKeyDown={handleKeyDown} placeholder="请输入内容" />;

};



export default MyComponent;

3. 表单提交事件(`FormEvent`)

使用 React.FormEvent<HTMLFormElement> 定义

javascript 复制代码
import React from "react";



interface FormData {

  username: string;

  password: string;

}



const MyComponent: React.FC = () => {

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {

    event.preventDefault();

    const formData: FormData = {

      username: (

        event.currentTarget.elements.namedItem("username") as HTMLInputElement

      ).value,

      password: (

        event.currentTarget.elements.namedItem("password") as HTMLInputElement

      ).value,

    };

    console.log("提交的表单数据:", formData);

  };



  return (

    <form onSubmit={handleSubmit}>

      <input type="text" name="username" placeholder="用户名" />

      <input type="password" name="password" placeholder="密码" />

      <button type="submit">提交</button>

    </form>

  );

};



export default MyComponent;
相关推荐
阿喵派我来抓鱼1 小时前
深入理解 AI 流式接口:从请求到响应的完整解析
react.js·ai·前端框架·vue
sdgsdgdsgc1 小时前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生9841 小时前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
心止水j1 小时前
spark
javascript·数据库·spark
黑云压城After4 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务5 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友6 小时前
什么是断言?
前端·后端·安全
FIN66687 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4957 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1247 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端