React+TS常用事件类型(event)

菜鸟风

已于 2023-05-23 16:19:42 修改

阅读量2.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react typescript 前端

于 2023-05-23 16:18:52 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43935061/article/details/130829407

react 专栏收录该内容

3 篇文章

订阅专栏

本文整理了在React中常见的事件类型，如ChangeEvent用于input元素的onChange，KeyboardEvent包括onKeyDown等键盘事件，FocusEvent对应onFocus和onBlur，FormEvent处理表单提交，DragEvent涉及拖放操作，TouchEvent涵盖触摸动作，WheelEvent处理滚轮事件，AnimationEvent与动画相关，MouseEvent则包含点击和鼠标移动等事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自学react的时候发现写event的事件类型时总是不知道写什么,写any又对不起TS的校验,因此整理了event的事件类型,
使用举例:

const [image, setImage] = useState<File | null>(null);
const chooseImage = (event: ChangeEvent<HTMLInputElement>) => {
   const files = event.target.files;
   if (files) {
     const image = files[0];
     setImage(image);
     console.log('image:', image)
   }
 };

React.KeyboardEvent: 键盘事件,如onKeyDown、onKeyUp、onKeyPress

<input onKeyDown={(e) => console.log(e)} />

React.FocusEvent: 焦点事件,如onFocus、onBlur

<input onFocus={(e) => console.log(e)} />

React.FormEvent: 表单提交事件,如onSubmit

<form onSubmit={(e) => e.preventDefault()}>
	<button type="submit">Submit</button>
</form>

React.DragEvent:拖拽事件,如onDragStart、onDragEnd、onDragOver、onDrop

<div
	draggable
   onDragStart={(e) => console.log(e)}
   onDragOver={(e) => e.preventDefault()}
   onDrop={(e) => console.log(e)}
 ></div>

React.TouchEvent: 触摸事件,如onTouchStart、onTouchMove、onTouchEnd

<div onTouchStart={(e) => console.log(e)}></div>

React.WheelEvent: 滚轮事件,如onWheel

<div onWheel={(e) => console.log(e)}></div>

React.AnimationEvent:动画事件,如onAnimationStart、onAnimationEnd、onAnimationIteration

<div
  style={{ animation: "rotate 1s linear infinite" }}
  onAnimationStart={() => console.log("Start!")}
  onAnimationEnd={() => console.log("End!")}
  onAnimationIteration={() => console.log("Iterate!")}
/>

React.MouseEvent: 鼠标事件,如onClick、onDoubleClick、onMouseEnter等

<button onClick={(e) => console.log(e)}>Click</button>

React.ChangeEvent: input、textarea等元素的onChange事件

<input onChange={(e) => console.log(e)} />

SelectChangeEvent: select元素的onChange事件

<select onChange={(e) => console.log(e)}>
  <option value="1">1</option>
  <option value="2">2</option>
</select>