之前分享过一篇《如何优雅地在 React 中使用TypeScript，看这一篇就够了！》，文中介绍了React和TypeScript搭配使用的一些常见用法。其中第四部分介绍了在React的事件处理中如何定义事件类型，下面来通过一些简单的 Demo （每个 Demo 后面都有 CodeSandBox 的在线体验地址）看看如何在 React + TypeScrip 中处理常见的事件！

目录：
1. onClick
2. onChange
3. onScroll
4. onSubmit
5. onCopy、onCut、onPaste
6. onMouseOver、onMouseOut
7. onLoad、onError
8. onkeydown、onkeypress、onkeyup
9. onFocus、onBlur
10. onDragStart、onDrop、onDragOver
11. window.resize

1. onClick

onClick可能是平时用的最多的事件之一了，这里主要列举两种类型的onClick事件：

  • button按钮的onClick事件；
  • 任意元素的的onClick事件。

下面先来看看按钮的 onClick 事件，当点击按钮时，在页面显示按钮的名称：

  1. import React, { useState } from "react";
  2. import "./styles.css";
  4. const App: React.FunctionComponent = () => {
  5.   const [clickedButton, setClickedButton] = useState("");
  7.   const buttonHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
  8.     event.preventDefault();
  9.     const button: HTMLButtonElement = event.currentTarget;
  10.     setClickedButton(button.name);
  11.   };
  13.   return (
  14.     <div className="container">
  15.       <form>
  16.         <button onClick={buttonHandler} className="button" name="button 1">
  17.           Button 1
  18.         </button>
  20.         <button onClick={buttonHandler} className="button" name="button 2">
  21.           Button 2
  22.         </button>
  24.         <button onClick={buttonHandler} className="button" name="button 3">
  25.           Button 3
  26.         </button>
  27.       </form>
  28.       <h1>
  29.         {clickedButton !== "" ? `点击了 ${clickedButton}` : "没有点击任何按钮"}
  30.       </h1>
  31.     </div>
  32.   );
  33. };
  35. export default App;

在线体验：https://codesandbox.io/s/dawn-feather-8gofq1

可以看到，onClick 事件的事件处理对象的类型都定义为了 MouseEvent，其中传入的参数为绑定事件的元素的类型。可以通过事件对象的 currentTarget 属性来获取点击元素的属性。

再来看看任意元素的 onClick事件，点击一个元素时，在控制台打印点击元素的类型、长度、宽度：

  1. import React from "react";
  2. import "./styles.css";
  4. const App: React.FunctionComponent = () => {
  5.   // 当 container 被点击时，触发该事件
  6.   const divClickedHandler = (event: React.MouseEvent<HTMLDivElement>) => {
  7.     const div = event.currentTarget;
  8.     console.log(
  9.       "ElementName: ", div.tagName,
  10.       "Width: ", div.clientWidth,
  11.       "Height: ", div.clientHeight
  12.     );
  13.   };
  15.   // 当 h1 被点击时，触发该事件
  16.   const headingClickedHandler = (event: React.MouseEvent<HTMLHeadingElement>) => {
  17.     event.stopPropagation();
  19.     const heading = event.currentTarget;
  20.     console.log(
  21.       "ElementName: ", heading.tagName,
  22.       "Width: ", heading.clientWidth,
  23.       "Height: ", heading.clientHeight
  24.     );
  25.   };
  27.   // 当图片被点击时，触发该事件
  28.   const imgClickedHandler = (event: React.MouseEvent<HTMLImageElement>) => {
  29.     event.stopPropagation();
  31.     const img = event.currentTarget;
  32.     console.log(
  33.       "ElementName: ", img.tagName,
  34.       "Width: ", img.clientWidth,
  35.       "Height: ", img.clientHeight
  36.     );
  37.   };
  39.   return (
  40.     <div className="container" onClick={divClickedHandler}>
  41.       <h1 onClick={headingClickedHandler}>Hello World</h1>
  42.       <img
  43.         src="https://resource-1255585089.cos.ap-beijing.myqcloud.com/111.png"
  44.         alt="111"
  45.         onClick={imgClickedHandler}
  46.       />
  47.     </div>
  48.   );
  49. };
  51. export default App;

可以看到，onClick 事件的事件处理对象的类型都定义为了 MouseEvent，其中传入的参数为绑定事件的元素的类型。需要注意，在任意元素上添加点击事件时，会触发事件冒泡，比如上面的例子，当点击是图片或者h1标签时就会导致其父元素div的点击事件触发。可以使用下面的代码来避免默认事件：

  1. event.stopPropagation();

在线体验：https://codesandbox.io/s/serverless-glade-g41upi

2. onChange

下面来看看 onChange 事件，先来看 select 元素的 onChange 事件的例子，当选中元素时，选中元素的值会显示在页面上：

  1. import React, { useState } from "react";
  2. import "./styles.css";
  4. const App: React.FunctionComponent = () => {
  5.   const [selectedOption, setSelectedOption] = useState<String>();
  7.   const selectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
  8.     const value = event.target.value;
  9.     setSelectedOption(value);
  10.   };
  12.   return (
  13.     <div className="container">
  14.       <select onChange={selectChange} className="select">
  15.         <option selected disabled>
  16.           选择一个
  17.         </option>
  18.         <option value="blue">Blue</option>
  19.         <option value="red">Red</option>
  20.         <option value="green">Green</option>
  21.         <option value="yellow">Yellow</option>
  22.       </select>
  23.       {selectedOption && <h2 className="result">{selectedOption}</h2>}
  24.     </div>
  25.   );
  26. };
  28. export default App;

可以看到，select 元素的 onSelect 的事件对象类型为 ChangeEvent，传入的参数为 select 元素的类型。可以通过 target 属性来获取 select选中的值。

在线体验：https://codesandbox.io/s/frosty-lichterman-33fpky

input 元素的 onChange 事件的例子，在输入框中输入内容，点击搜索按钮，在页面显示搜索结果：

  1. import React, { useState } from "react";
  2. import "./styles.css";
  4. interface Item {
  5.   id: number;
  6.   name: string;
  7.   price: number;
  8. }
  10. const PRODUCTS: Item[] = [
  11.   {
  12.     id: 1,
  13.     name: "Apple",
  14.     price: 1
  15.   },
  16.   {
  17.     id: 2,
  18.     name: "Book",
  19.     price: 5
  20.   },
  21.   {
  22.     id: 3,
  23.     name: "Banana",
  24.     price: 0.5
  25.   },
  26.   {
  27.     id: 4,
  28.     name: "Table",
  29.     price: 200
  30.   }
  31. ];
  33. const App: React.FunctionComponent = () => {
  34.   const [query, setQuery] = useState("");
  35.   const [result, setResult] = useState<Item[] | undefined>();
  37.   // 当 input 的内容改变时触发
  38.   const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
  39.     const enteredName = event.target.value;
  40.     setQuery(enteredName);
  41.   };
  43.   // 点击搜索时触发
  44.   const search = () => {
  45.     const foundItems = PRODUCTS.filter((item) =>
  46.       item.name.toLowerCase().includes(query.toLowerCase())
  47.     );
  48.     setResult(foundItems);
  49.   };
  51.   return (
  52.     <div className="container">
  53.       <div className="wrapper">
  54.         <input
  55.           value={query}
  56.           onChange={inputHandler}
  57.           placeholder="输入要搜索的商品名称"
  58.           className="input"
  59.         />
  61.         <button onClick={search}>搜索</button>
  62.       </div>
  64.       <div className="search-result">
  65.         {result && result.length > 0 ? (
  66.           result.map((item) => (
  67.             <li key={item.id} className="item">
  68.               <span className="item-id">{item.id}</span>
  69.               <span className="item-name">{item.name}</span>
  70.               <span className="item-price">{item.price}￥</span>
  71.             </li>
  72.           ))
  73.         ) : (
  74.           <h2>没有找到！</h2>
  75.         )}
  76.       </div>
  77.     </div>
  78.   );
  79. };
  81. export default App;

在线体验：https://codesandbox.io/s/pedantic-murdock-lejmg6

可以看到，这里input 的事件处理对象的类型为 ChangeEvent。要想获取输入的值需要从事件对象的 target 属性中获取。

3. onScroll

onScroll 事件在元素的滚动条被滚动时触发。

下面来看一个例子，当元素发生滚动时，计算滚动了多少的元素，从而计算页面滚动进度的百分比值，并显示在页面上：

  1. import React, { useState } from "react";
  2. import "./styles.css";
  4. const DUMMY_DATA = Array.from({ length: 100 }, (x, i) => {
  5.   return {
  6.     id: i,
  7.     title: `Item ${i}`
  8.   };
  9. });
  11. const App: React.FunctionComponent = () => {
  12.   const [progress, setProgress] = useState(0);
  14.   // 当元素发生滚动时触发该事件
  15.   const scrollHandler = (event: React.UIEvent<HTMLDivElement>) => {
  16.     const containerHeight = event.currentTarget.clientHeight;
  17.     const scrollHeight = event.currentTarget.scrollHeight;
  18.     const scrollTop = event.currentTarget.scrollTop;
  19.     setProgress(((scrollTop + containerHeight) / scrollHeight) * 100);
  20.   };
  22.   return (
  23.     <>
  24.       <div className="container" onScroll={scrollHandler}>
  25.         <div className="list">
  26.           {DUMMY_DATA.map((item) => (
  27.             <div className="item" key={item.id}>
  28.               {item.title}
  29.             </div>
  30.           ))}
  31.         </div>
  32.       </div>
  34.       <div className="progressBar">
  35.         <div className="progressValue" style={{ width: `${progress}%` }}></div>
  36.       </div>
  37.       <p className="text">{progress.toFixed(2)}%</p>
  38.     </>
  39.   );
  40. };
  42. export default App;

可以看到，onScroll 事件的事件对象类型定义为了：React.UIEvent<HTMLDivElement>，参数为绑定事件的元素的类型。可以通过事件对象的 currentTarget 属性来获取页面滚动的相关值。

在线体验：https://codesandbox.io/s/competent-hellman-qh7non

4. onSubmit

下面来看看表单的 onSubmit 事件，该事件在表单提交时触发：

  1. import React, { useState } from "react";
  2. import "./styles.css";
  4. const App: React.FunctionComponent = () => {
  5.   const [term, setTerm] = useState("");
  7.   const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
  8.     // 防止页面重新加载
  9.     event.preventDefault();
  10.     alert(term);
  11.   };
  13.   return (
  14.     <div className="container">
  15.       <form onSubmit={submitForm}>
  16.         <input
  17.           value={term}
  18.           onChange={(e) => setTerm(e.target.value)}
  19.           type="text"
  20.           className="input"
  21.         />
  22.         <button type="submit" className="btn">
  23.           提交
  24.         </button>
  25.       </form>
  26.     </div>
  27.   );
  28. };
  30. export default App;

表单提交事件的时间对象类型为 FormEvent。需要注意，为了防止页面在表单的 onSubmit 事件触发时重新加载，需要调用：

  1. event.preventDefault();

在线体验：https://codesandbox.io/s/condescending-danny-e1eerd

5. onCopy、onCut、onPaste

下面来看看常见的复制、剪切、粘贴这三个时间：

  • onCopy事件：在用户复制元素或元素的内容（如文本、图像）时触发；
  • onPaste事件：在用户在元素中粘贴一些内容时触发；
  • onCut事件：在用户剪切元素的内容时发生，此事件主要用于 input (type=”text”) 和 textarea 元素。

下面来看一个例子，当进行复制、剪切、粘贴时，给操作的元素加上一些样式：

  1. import React, { useState } from "react";
  2. import "./styles.css";
  4. const App: React.FunctionComponent = () => {
  5.   const [text, setText] = useState("hello world");
  7.   // 复制：onCopy
  8.   const copyHandler = (event: React.ClipboardEvent<HTMLInputElement>) => {
  9.     event.currentTarget.style.border = "3px solid green";
  10.   };
  12.   // 剪切：onCut
  13.   const cutHandler = (event: React.ClipboardEvent<HTMLInputElement>) => {
  14.     event.currentTarget.style.border = "3px solid orange";
  15.     event.currentTarget.style.backgroundColor = "yellow";
  16.     event.currentTarget.disabled = true;
  17.     setText("内容被剪切啦");
  18.   };
  20.   // 粘贴：onPaste
  21.   const pasteHandler = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
  22.     event.currentTarget.style.border = "5px solid purple";
  23.     event.currentTarget.style.backgroundColor = "orange";
  24.     event.currentTarget.value = event.clipboardData.getData("text").toUpperCase();
  25.     event.preventDefault();
  26.   };
  28.   return (
  29.     <div className="container">
  30.       <input type="text" value={text} onCopy={copyHandler} onCut={cutHandler} />
  31.       <hr />
  32.       <p>在下方粘贴:</p>
  33.       <textarea onPaste={pasteHandler} className="text-area"></textarea>
  34.     </div>
  35.   );
  36. };
  38. export default App;

可以看到，这三个事件的事件处理对象的类型都定义为了 ClipboardEvent，其中传入的参数为绑定事件的元素的类型。可以通过 currentTarget 属性来获取事件对象的属性。

在线体验：https://codesandbox.io/s/sleepy-keldysh-w5vemj

6. onMouseOver、onMouseOut

onmouseover 和 onmouseout 是常用的两个鼠标事件：

  • onmouseover：在鼠标指针移动到指定的对象上时触发；
  • onmouseout：在鼠标指针移出指定的对象时触发。

下面来看一个例子，当鼠标在元素上和移出元素时给元素添加不同的样式：

  1. import React from "react";
  2. import "./styles.css";
  4. const App: React.FunctionComponent = () => {
  5.   // 当鼠标指针位于box上时，将触发此功能
  6.   const boxMouseOverHandler = (event: React.MouseEvent<HTMLDivElement>) => {
  7.     const box: HTMLDivElement = event.currentTarget;
  8.     box.style.backgroundColor = "lightblue";
  9.   };
  11.   // 当鼠标指针移出box时，将触发此功能
  12.   const boxMouseOutHandler = (event: React.MouseEvent<HTMLDivElement>) => {
  13.     const box: HTMLDivElement = event.currentTarget;
  14.     box.style.backgroundColor = "lightgreen";
  15.   };
  17.   // 当鼠标指针位于输入框上时，将触发此功能
  18.   const inputMouseOverHandler = (event: React.MouseEvent<HTMLInputElement>) => {
  19.     const input: HTMLInputElement = event.currentTarget;
  20.     input.style.backgroundColor = "lime";
  21.   };
  23.   //当鼠标指针移出输入框时，将触发此功能
  24.   const inputMouseOutHandler = (event: React.MouseEvent<HTMLInputElement>) => {
  25.     const input: HTMLInputElement = event.currentTarget;
  26.     input.style.backgroundColor = "white";
  27.   };
  29.   //当鼠标指针位于按钮上时，将触发此功能
  30.   const buttonMouseOverHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
  31.     const btn: HTMLButtonElement = event.currentTarget;
  32.     btn.style.border = "3px solid red";
  33.     btn.style.backgroundColor = "orange";
  34.   };
  36.   // 当鼠标指针移出按钮时，将触发此功能
  37.   const buttonMouseOutHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
  38.     const btn: HTMLButtonElement = event.currentTarget;
  39.     btn.style.border = "none";
  40.     btn.style.backgroundColor = "yellow";
  41.   };
  43.   return (
  44.     <div
  45.       className="box"
  46.       onMouseOver={boxMouseOverHandler}
  47.       onMouseOut={boxMouseOutHandler}
  48.     >
  49.       <input
  50.         onMouseOver={inputMouseOverHandler}
  51.         onMouseOut={inputMouseOutHandler}
  52.         placeholder="hello world"
  53.       />
  54.       <button
  55.         onMouseOver={buttonMouseOverHandler}
  56.         onMouseOut={buttonMouseOutHandler}
  57.       >
  58.         Button
  59.       </button>
  60.     </div>
  61.   );
  62. };
  64. export default App;

可以看到，这两个事件的事件处理对象的类型都定义为了 MouseEvent，其中传入的参数为绑定事件的元素的类型。可以通过事件对象的 currentTarget 来获取事件对象的属性。

在线体验：https://codesandbox.io/s/nervous-cloud-5r6d6p

7. onLoad、onError

onLoad 和 onError 是页面外部资源加载相关的两个相关事件：

  • onload：资源加载失败；
  • onerror：资源加载出错。

下面来看一个例子， 当图片成功时给它添加类名 success，加载失败时添加类型 error，并更换为备用图片的URL：

  1. import React from "react";
  2. import "./styles.css";
  4. const IMAGE ="https://resource-1255585089.cos.ap-beijing.myqcloud.com/111.png";
  5. const FALLBACK_IMAGE ="https://resource-1255585089.cos.ap-beijing.myqcloud.com/222.png";
  7. const App: React.FunctionComponent = () => {
  8.   const imageOnLoadHandler = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
  9.     // 图片加载成功时，打印图片的地址，并添加类名 success
  10.     console.log(event.currentTarget.src);
  11.     if (event.currentTarget.className !== "error") {
  12.       event.currentTarget.className = "success";
  13.     }
  14.   };
  16.   const imageOnErrorHandler = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
  17.     // 图片加载失败时，加载替代的图片，并添加类名 error
  18.     event.currentTarget.src = FALLBACK_IMAGE;
  19.     event.currentTarget.className = "error";
  20.   };
  22.   return (
  23.     <div className="container">
  24.       <img
  25.         src={IMAGE}
  26.         onLoad={imageOnLoadHandler}
  27.         onError={imageOnErrorHandler}
  28.         alt="111"
  29.       />
  30.     </div>
  31.   );
  32. };
  34. export default App;

可以看到，这两个事件的事件处理对象的类型都定义为了 SyntheticEvent，其中传入的第一个参数为绑定事件的元素的类型。可以通过事件对象的 currentTarget 属性来获取事件对象的属性。

在线体验：https://codesandbox.io/s/determined-tamas-rjwjoq

8. onkeydown、onkeypress、onkeyup

下面来看几个常见的键盘事件：

  • onKeyDown：在用户按下一个键盘按键时触发；
  • onKeyUp：在键盘按键被松开时触发；
  • onKeyPress：在键盘按键被按下并释放一个键时发生。在所有浏览器中 onkeypress 事件只能监听字母和数字，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、箭头等）。监听一个用户是否按下按键请使用 onkeydown 事件，所有浏览器都支持 onkeydown 事件。

这三个事件的执行顺序如下：

  1. onkeydown
  2. onkeypress
  3. onkeyup

来看一个例子，按下ESC键可以清除已经输入的文本，按下Enter键可以弹出已经输入的文本：

  1. import React, { useState } from "react";
  2. import "./styles.css";
  4. const App: React.FunctionComponent = () => {
  5.   const [enteredText, setEnteredText] = useState("");
  7.   // onKeyDown 事件处理函数
  8.   const keyDownHandler = (event: React.KeyboardEvent<HTMLInputElement>) => {
  9.     if (event.code === "Enter") {
  10.       alert(`输入内容："${enteredText}"`);
  11.     }
  12.   };
  14.   // onKeyUp 事件处理函数
  15.   const keyUpHandler = (event: React.KeyboardEvent<HTMLInputElement>) => {
  16.     if (event.code === "Escape") {
  17.       const confirm = window.confirm("确定清除文本吗？");
  19.       if (confirm) {
  20.         setEnteredText("");
  21.       }
  22.     }
  23.   };
  25.   // onKeyPress 事件处理函数
  26.   const keyPressHandler = (event: React.KeyboardEvent<HTMLInputElement>) => {
  27.     //...
  28.   };
  30.   return (
  31.     <div className="container">
  32.       <input
  33.         onKeyDown={keyDownHandler}
  34.         onKeyUp={keyUpHandler}
  35.         onKeyPress={keyPressHandler}
  36.         type="text"
  37.         className="text-input"
  38.         value={enteredText}
  39.         onChange={(e) => setEnteredText(e.target.value)}
  40.       />
  41.     </div>
  42.   );
  43. };
  45. export default App;

这三个事件的事件对象类型都是 KeyboardEvent。可以通过事件对象的 code属性获取按下的键盘键值。

在线体验：https://codesandbox.io/s/prod-sky-txwzgd

再来看一个简单的例子，通过在键盘上按下上下左右键使得盒子在页面上移动：

  1. import React, { useState } from "react";
  2. import "./styles.css";
  4. const App: React.FunctionComponent = () => {
  5.   const [left, setLeft] = useState(0);
  6.   const [top, setTop] = useState(0);
  8.   // onKeyDown 事件处理函数
  9.   const keyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {
  10.     console.log(event.code);
  11.     if (event.code === "ArrowUp") {
  12.       setTop((top) => top - 10);
  13.     }
  15.     if (event.code === "ArrowDown") {
  16.       setTop((top) => top + 10);
  17.     }
  19.     if (event.code === "ArrowLeft") {
  20.       setLeft((left) => left - 10);
  21.     }
  23.     if (event.code === "ArrowRight") {
  24.       setLeft((left) => left + 10);
  25.     }
  26.   };
  28.   return (
  29.     <div className="container" tabIndex={0} onKeyDown={keyDownHandler}>
  30.       <div className="box" style={{ top: top, left: left }}></div>
  31.     </div>
  32.   );
  33. };
  35. export default App;

在线体验：https://codesandbox.io/s/hungry-meninsky-zhkbzb

9. onFocus、onBlur

  • onfocus：在元素获得焦点时被触发，适用于<input>、<select> 以及<a>标签；
  • onblur：在元素失去焦点时触发，常用于表单验证。

下面来看一个例子，在输入框中输入内容，输入过程中保存输入的值， 当输入完成，失去输入焦点时，对输入内容进行校验：

  1. import React, { useState } from "react";
  2. import "./styles.css";
  4. const App: React.FunctionComponent = () => {
  5.   const [name, setName] = useState("");
  6.   const [isValid, setIsValid] = useState(false);
  7.   const [isFocus, setIsFocus] = useState(false);
  8.   const [isBlur, setIsBlur] = useState(false);
  10.   // 处理 input 的 onChange事件
  11.   const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
  12.     setName(event.target.value);
  13.   };
  15.   // 处理 input 的 onFocus 事件
  16.   const focusHandler = (event: React.FocusEvent<HTMLInputElement>) => {
  17.     setIsFocus(true);
  18.     setIsBlur(false);
  19.     console.log(event);
  20.   };
  22.   // 处理 input 的 onBlur 事件
  23.   const blurHandler = (event: React.FocusEvent<HTMLInputElement>) => {
  24.     setIsFocus(false);
  25.     setIsBlur(true);
  27.     if (name.match(/^[a-z][a-z\s]*$/i)) {
  28.       setIsValid(true);
  29.     } else {
  30.       setIsValid(false);
  31.     }
  32.     console.log(event);
  33.   };
  35.   return (
  36.     <div className="container">
  37.       <input
  38.         type="text"
  39.         onFocus={focusHandler}
  40.         onBlur={blurHandler}
  41.         value={name}
  42.         onChange={changeHandler}
  43.         className="input"
  44.         placeholder="请输入名字"
  45.       />
  46.       {isFocus && <span className="hint">只能输入字母和空格</span>}
  47.       {isBlur && !isValid && <p className="error">输入格式错误</p>}
  48.       {isBlur && isValid && <p className="success">输入正确</p>}
  49.     </div>
  50.   );
  51. };
  53. export default App;

这里两个事件的事件对象类型都是 FocusEvent，传入的参数是 input 元素的类型。

在线体验：https://codesandbox.io/s/spring-moon-roegc5

10. onDragStart、onDrop、onDragOver

拖拽操作在HTML5 是作为标准的一部分。能够使用HTML5所支持的事件和属性来实现拖拽操作。下面是三个常用的拖拽事件：

  • onDragStart：开始拖拽时触发，事件里利用dataTransfer保存拖拽元素的 class 或 id。
  • onDrop：元素放置时不断触发，事件里利用dataTransfer来获取所保存的数据，并进行业务处理。
  • onDragOver：在拖拽时不断触发，在其中取消默认行为可以保证该标签可以放置拖拽元素。 ```typescript import React, { useState } from “react”; import “./styles.css”;

const PHOTO_URL = “https://resource-1255585089.cos.ap-beijing.myqcloud.com/111.png“;

const App: React.FunctionComponent = () => { const [content, setContent] = useState(“Drop Something Here”);

// 开始拖拽时触发改事件 const dragStartHandler = (event: React.DragEvent, data: string) => { event.dataTransfer.setData(“text”, data); };

// 在放置时触发该事件 const dropHandler = (event: React.DragEvent) => { event.preventDefault(); const data = event.dataTransfer.getData(“text”); setContent(data); };

// 使得第三个盒子可以放下 const allowDrop = (event: React.DragEvent) => { event.preventDefault(); };

return (

dragStartHandler(event, PHOTO_URL)} draggable={true} > 111 

  1.   <div
  2.     className="box2"
  3.     onDragStart={(event) => dragStartHandler(event, "黄色卡片")}
  4.     draggable={true}
  5.   ></div>
  7.   <div className="box3" onDragOver={allowDrop} onDrop={dropHandler}>
  8.     {content.endsWith(".png") ? (
  9.       <img src={content} alt="" />
  10.     ) : (
  11.       <h2>{content}</h2>
  12.     )}
  13.   </div>
  14. </div>

); };

export default App;

  1. 可以看到，两个拖拽事件的事件对象类型都是 `DragEvent`。可以通过事件对象的 `dataTransfer` 来获取事件对象的属性。
  3. **在线体验：**[https://codesandbox.io/s/crazy-cloud-5jejr1](https://codesandbox.io/s/crazy-cloud-5jejr1?file=/src/App.tsx:0-1382)
  4. <a name="SBABF"></a>
  5. ## 11. window.resize
  6. 在 React 中是不支持直接定义 `onResize` 事件的。可以使用浏览器原生支持的 `window.resize` 事件，当浏览器窗口发生变化时会触发改事件。
  8. 可以使用以下两种方式之一来设置事件处理函数：
  9. ```javascript
  10. window.resize = myHandlerFunction;
  12. window.addEventListener('resize', myHandlerFunction);

在 React 中，要在浏览器窗口大小发生变化时重新渲染组件，可以使用 useState hook 来实现：

  1. useEffect(() => {
  2.   window.onresize = myHandlerFunction;
  3. }, []);
  5. useEffect(() => {
  6.   window.addEventListener('resize', myHandlerFunction);
  7. }, []);

下面来看一个例子，在改变浏览器窗口的大小时，页面实时显示浏览器窗口的长度和宽度，并在不同宽度时显示不同的背景色：

  1. import React, { useState, useEffect, FunctionComponent } from "react";
  2. import "./styles.css";
  4. interface Size {
  5.   width: number;
  6.   height: number;
  7. }
  9. const App: FunctionComponent = () => {
  10.   const [size, setSize] = useState<Size>();
  12.   const resizeHanlder = () => {
  13.     const width = window.innerWidth;
  14.     const height = window.innerHeight;
  16.     setSize({
  17.       width: width,
  18.       height: height,
  19.     });
  20.   };
  22.   useEffect(() => {
  23.     window.onresize = resizeHanlder;
  24.   }, []);
  26.   return (
  27.     <div
  28.       className="container"
  29.       style={{
  30.         backgroundColor:
  31.           !size || size.width <= 500
  32.             ? "white"
  33.             : size && size.width <= 700
  34.               ? "green"
  35.               : "orange",
  36.       }}
  37.     >
  38.       {size && (
  39.         <>
  40.           <h2>Width: {size.width}</h2>
  41.           <h2>Height: {size.height}</h2>
  42.         </>
  43.       )}
  44.     </div>
  45.   );
  46. };
  48. export default App;

在线体验：https://codesandbox.io/s/async-leaf-m62ixj