React + TypeScript：如何处理常见事件？

大家好，我是 CUGGZ。之前分享过一篇《使用 TypeScript 编写 React 的最佳实践！》，文中介绍了 React 和 TypeScript 搭配使用的一些常见用法。其中第四部分介绍了在React的事件处理中如何定义事件类型，下面来通过一些简单的 Demo （每个 Demo 后面都有 CodeSandBox 的在线体验地址）看看如何在 React + TypeScrip 中处理常见的事件！,目录：,onClick 是用的最多的事件之一，这里主要列举两种类型的 onClick 事件：,下面先来看看按钮的 onClick 事件，当点击按钮时，在页面显示按钮的名称：,可以看到，onClick 事件的事件处理对象的类型都定义为了 MouseEvent，其中传入的参数为绑定事件的元素的类型。可以通过事件对象的 currentTarget 属性来获取点击元素的属性。,在线体验：https://codesandbox.io/s/dawn-feather-8gofq1,再来看看任意元素的 onClick事件，点击一个元素时，在控制台打印点击元素的类型、长度、宽度：,可以看到，onClick 事件的事件处理对象的类型都定义为了 MouseEvent，其中传入的参数为绑定事件的元素的类型。需要注意，在任意元素上添加点击事件时，会触发事件冒泡，比如上面的例子，当点击是图片或者h1标签时就会导致其父元素div的点击事件触发。可以使用下面的代码来避免默认事件：,在线体验：https://codesandbox.io/s/serverless-glade-g41upi,下面来看看 onChange 事件，先来看 select 元素的 onChange 事件的例子，当选中元素时，选中元素的值会显示在页面上：,可以看到，select 元素的 onSelect 的事件对象类型为 ChangeEvent，传入的参数为 select 元素的类型。可以通过 target 属性来获取 select选中的值。,在线体验：https://codesandbox.io/s/frosty-lichterman-33fpky,input 元素的 onChange 事件的例子，在输入框中输入内容，点击搜索按钮，在页面显示搜索结果：,可以看到，这里input 的事件处理对象的类型为 ChangeEvent。要想获取输入的值需要从事件对象的 target 属性中获取。,在线体验：https://codesandbox.io/s/pedantic-murdock-lejmg6,onScroll 事件在元素的滚动条被滚动时触发。,下面来看一个例子，当元素发生滚动时，计算滚动了多少的元素，从而计算页面滚动进度的百分比值，并显示在页面上：,可以看到，onScroll 事件的事件对象类型定义为了：React.UIEvent<HTMLDivElement>，参数为绑定事件的元素的类型。可以通过事件对象的 currentTarget 属性来获取页面滚动的相关值。,在线体验：https://codesandbox.io/s/competent-hellman-qh7non,下面来看看表单的 onSubmit 事件，该事件在表单提交时触发：,表单提交事件的时间对象类型为 FormEvent。需要注意，为了防止页面在表单的 onSubmit事件触发时重新加载，需要调用：,在线体验：https://codesandbox.io/s/condescending-danny-e1eerd,下面来看看常见的复制、剪切、粘贴这三个时间：,下面来看一个例子，当进行复制、剪切、粘贴时，给操作的元素加上一些样式：,可以看到，这三个事件的事件处理对象的类型都定义为了 ClipboardEvent，其中传入的参数为绑定事件的元素的类型。可以通过 currentTarget 属性来获取事件对象的属性。,在线体验：https://codesandbox.io/s/sleepy-keldysh-w5vemj,onmouseover 和 onmouseout 是常用的两个鼠标事件：,下面来看一个例子，当鼠标在元素上和移出元素时给元素添加不同的样式：,可以看到，这两个事件的事件处理对象的类型都定义为了 MouseEvent，其中传入的参数为绑定事件的元素的类型。可以通过事件对象的 currentTarget 来获取事件对象的属性。,在线体验：https://codesandbox.io/s/nervous-cloud-5r6d6p,onLoad 和 onError 是页面外部资源加载相关的两个相关事件：,下面来看一个例子， 当图片成功时给它添加类名 success，加载失败时添加类型 error，并更换为备用图片的URL：,可以看到，这两个事件的事件处理对象的类型都定义为了 SyntheticEvent，其中传入的第一个参数为绑定事件的元素的类型。可以通过事件对象的 currentTarget 属性来获取事件对象的属性。,在线体验：https://codesandbox.io/s/determined-tamas-rjwjoq,下面来看几个常见的键盘事件：,这三个事件的执行顺序如下：,来看一个例子，按下ESC键可以清除已经输入的文本，按下Enter键可以弹出已经输入的文本：,这三个事件的事件对象类型都是 KeyboardEvent。可以通过事件对象的 code属性获取按下的键盘键值。,在线体验：https://codesandbox.io/s/prod-sky-txwzgd,再来看一个简单的例子，通过在键盘上按下上下左右键使得盒子在页面上移动：,在线体验：https://codesandbox.io/s/hungry-meninsky-zhkbzb,下面来看一个例子，在输入框中输入内容，输入过程中保存输入的值， 当输入完成，失去输入焦点时，对输入内容进行校验：,这里两个事件的事件对象类型都是 FocusEvent，传入的参数是 input 元素的类型。,在线体验：https://codesandbox.io/s/spring-moon-roegc5,拖拽操作在HTML5 是作为标准的一部分。能够使用HTML5所支持的事件和属性来实现拖拽操作。下面是三个常用的拖拽事件：,可以看到，两个拖拽事件的事件对象类型都是 DragEvent。可以通过事件对象的 dataTransfer 来获取事件对象的属性。,在线体验：https://codesandbox.io/s/crazy-cloud-5jejr1,在 React 中是不支持直接定义 onResize 事件的。可以使用浏览器原生支持的 window.resize 事件，当浏览器窗口发生变化时会触发改事件。,可以使用以下两种方式之一来设置事件处理函数：,在 React 中，要在浏览器窗口大小发生变化时重新渲染组件，可以使用 useStatehook 来实现：,下面来看一个例子，在改变浏览器窗口的大小时，页面实时显示浏览器窗口的长度和宽度，并在不同宽度时显示不同的背景色：,在线体验：https://codesandbox.io/s/async-leaf-m62ixj,常见的 Event 事件对象如下：,常见的元素类型如下：