React + TypeScript：如何處理常見事件？

作者：CUGGZ 2023-07-03 13:50:13

在 React 中是不支持直接定義 onResize 事件的。可以使用瀏覽器原生支持的 window.resize 事件，當(dāng)瀏覽器窗口發(fā)生變化時(shí)會(huì)觸發(fā)改事件。

大家好，我是 CUGGZ。之前分享過一篇《使用 TypeScript 編寫 React 的最佳實(shí)踐！》，文中介紹了 React 和 TypeScript 搭配使用的一些常見用法。其中第四部分介紹了在React的事件處理中如何定義事件類型，下面來(lái)通過一些簡(jiǎn)單的 Demo （每個(gè) Demo 后面都有 CodeSandBox 的在線體驗(yàn)地址）看看如何在 React + TypeScrip 中處理常見的事件！

onClick
onChange
onScroll
onSubmit
onCopy、onCut、onPaste
onMouseOver、onMouseOut
onLoad、onError
onkeydown、onkeypress、onkeyup
onFocus、onBlur
onDragStart、onDrop、onDragOver
window.resize

1. onClick

onClick 是用的最多的事件之一，這里主要列舉兩種類型的 onClick 事件：

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

下面先來(lái)看看按鈕的 onClick 事件，當(dāng)點(diǎn)擊按鈕時(shí)，在頁(yè)面顯示按鈕的名稱：

import React, { useState } from "react";
import "./styles.css";

const App: React.FunctionComponent = () => {
  const [clickedButton, setClickedButton] = useState("");

  const buttonHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    const button: HTMLButtonElement = event.currentTarget;
    setClickedButton(button.name);
  };

  return (
    <div className="container">
      <form>
        <button onClick={buttonHandler} className="button" name="button 1">
          Button 1
        </button>

        <button onClick={buttonHandler} className="button" name="button 2">
          Button 2
        </button>

        <button onClick={buttonHandler} className="button" name="button 3">
          Button 3
        </button>
      </form>
      <h1>
        {clickedButton !== "" ? `點(diǎn)擊了 ${clickedButton}` : "沒有點(diǎn)擊任何按鈕"}
      </h1>
    </div>
  );
};

export default App;

可以看到，onClick 事件的事件處理對(duì)象的類型都定義為了 MouseEvent，其中傳入的參數(shù)為綁定事件的元素的類型。可以通過事件對(duì)象的 currentTarget 屬性來(lái)獲取點(diǎn)擊元素的屬性。

在線體驗(yàn)：https://codesandbox.io/s/dawn-feather-8gofq1

再來(lái)看看任意元素的 onClick事件，點(diǎn)擊一個(gè)元素時(shí)，在控制臺(tái)打印點(diǎn)擊元素的類型、長(zhǎng)度、寬度：

import React from "react";
import "./styles.css";

const App: React.FunctionComponent = () => {
  // 當(dāng) container 被點(diǎn)擊時(shí)，觸發(fā)該事件
  const divClickedHandler = (event: React.MouseEvent<HTMLDivElement>) => {
    const div = event.currentTarget;
    console.log(
      "ElementName: ", div.tagName,
      "Width: ", div.clientWidth,
      "Height: ", div.clientHeight
    );
  };

  // 當(dāng) h1 被點(diǎn)擊時(shí)，觸發(fā)該事件
  const headingClickedHandler = (event: React.MouseEvent<HTMLHeadingElement>) => {
    event.stopPropagation();

    const heading = event.currentTarget;
    console.log(
      "ElementName: ", heading.tagName,
      "Width: ", heading.clientWidth,
      "Height: ", heading.clientHeight
    );
  };

  // 當(dāng)圖片被點(diǎn)擊時(shí)，觸發(fā)該事件
  const imgClickedHandler = (event: React.MouseEvent<HTMLImageElement>) => {
    event.stopPropagation();
    
    const img = event.currentTarget;
    console.log(
      "ElementName: ", img.tagName,
      "Width: ", img.clientWidth,
      "Height: ", img.clientHeight
    );
  };

  return (
    <div className="container" onClick={divClickedHandler}>
      <h1 onClick={headingClickedHandler}>Hello World</h1>
      <img
        src="https://resource-1255585089.cos.ap-beijing.myqcloud.com/111.png"
        alt="111"
        onClick={imgClickedHandler}
      />
    </div>
  );
};

export default App;

可以看到，onClick 事件的事件處理對(duì)象的類型都定義為了 MouseEvent，其中傳入的參數(shù)為綁定事件的元素的類型。需要注意，在任意元素上添加點(diǎn)擊事件時(shí)，會(huì)觸發(fā)事件冒泡，比如上面的例子，當(dāng)點(diǎn)擊是圖片或者h(yuǎn)1標(biāo)簽時(shí)就會(huì)導(dǎo)致其父元素div的點(diǎn)擊事件觸發(fā)。可以使用下面的代碼來(lái)避免默認(rèn)事件：

event.stopPropagation();

在線體驗(yàn)：https://codesandbox.io/s/serverless-glade-g41upi

2. onChange

下面來(lái)看看 onChange 事件，先來(lái)看 select 元素的 onChange 事件的例子，當(dāng)選中元素時(shí)，選中元素的值會(huì)顯示在頁(yè)面上：

import React, { useState } from "react";
import "./styles.css";

const App: React.FunctionComponent = () => {
  const [selectedOption, setSelectedOption] = useState<String>();

  const selectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const value = event.target.value;
    setSelectedOption(value);
  };

  return (
    <div className="container">
      <select onChange={selectChange} className="select">
        <option selected disabled>
          選擇一個(gè)
        </option>
        <option value="blue">Blue</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
      </select>
      {selectedOption && <h2 className="result">{selectedOption}</h2>}
    </div>
  );
};

export default App;

可以看到，select 元素的 onSelect 的事件對(duì)象類型為 ChangeEvent，傳入的參數(shù)為 select 元素的類型。可以通過 target 屬性來(lái)獲取 select選中的值。

在線體驗(yàn)：https://codesandbox.io/s/frosty-lichterman-33fpky

input 元素的 onChange 事件的例子，在輸入框中輸入內(nèi)容，點(diǎn)擊搜索按鈕，在頁(yè)面顯示搜索結(jié)果：

import React, { useState } from "react";
import "./styles.css";

interface Item {
  id: number;
  name: string;
  price: number;
}

const PRODUCTS: Item[] = [
  {
    id: 1,
    name: "Apple",
    price: 1
  },
  {
    id: 2,
    name: "Book",
    price: 5
  },
  {
    id: 3,
    name: "Banana",
    price: 0.5
  },
  {
    id: 4,
    name: "Table",
    price: 200
  }
];

const App: React.FunctionComponent = () => {
  const [query, setQuery] = useState("");
  const [result, setResult] = useState<Item[] | undefined>();

  // 當(dāng) input 的內(nèi)容改變時(shí)觸發(fā)
  const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    const enteredName = event.target.value;
    setQuery(enteredName);
  };

  // 點(diǎn)擊搜索時(shí)觸發(fā)
  const search = () => {
    const foundItems = PRODUCTS.filter((item) =>
      item.name.toLowerCase().includes(query.toLowerCase())
    );
    setResult(foundItems);
  };

  return (
    <div className="container">
      <div className="wrapper">
        <input
          value={query}
          onChange={inputHandler}
          placeholder="輸入要搜索的商品名稱"
          className="input"
        />

        <button onClick={search}>搜索</button>
      </div>

      <div className="search-result">
        {result && result.length > 0 ? (
          result.map((item) => (
            <li key={item.id} className="item">
              <span className="item-id">{item.id}</span>
              <span className="item-name">{item.name}</span>
              <span className="item-price">{item.price}￥</span>
            </li>
          ))
        ) : (
          <h2>沒有找到！</h2>
        )}
      </div>
    </div>
  );
};

export default App;

可以看到，這里input 的事件處理對(duì)象的類型為 ChangeEvent。要想獲取輸入的值需要從事件對(duì)象的 target 屬性中獲取。

在線體驗(yàn)：https://codesandbox.io/s/pedantic-murdock-lejmg6

3. onScroll

onScroll 事件在元素的滾動(dòng)條被滾動(dòng)時(shí)觸發(fā)。

下面來(lái)看一個(gè)例子，當(dāng)元素發(fā)生滾動(dòng)時(shí)，計(jì)算滾動(dòng)了多少的元素，從而計(jì)算頁(yè)面滾動(dòng)進(jìn)度的百分比值，并顯示在頁(yè)面上：

import React, { useState } from "react";
import "./styles.css";

const DUMMY_DATA = Array.from({ length: 100 }, (x, i) => {
  return {
    id: i,
    title: `Item ${i}`
  };
});

const App: React.FunctionComponent = () => {
  const [progress, setProgress] = useState(0);
  
  // 當(dāng)元素發(fā)生滾動(dòng)時(shí)觸發(fā)該事件
  const scrollHandler = (event: React.UIEvent<HTMLDivElement>) => {
    const containerHeight = event.currentTarget.clientHeight;
    const scrollHeight = event.currentTarget.scrollHeight;
    const scrollTop = event.currentTarget.scrollTop;
    setProgress(((scrollTop + containerHeight) / scrollHeight) * 100);
  };

  return (
    <>
      <div className="container" onScroll={scrollHandler}>
        <div className="list">
          {DUMMY_DATA.map((item) => (
            <div className="item" key={item.id}>
              {item.title}
            </div>
          ))}
        </div>
      </div>

      <div className="progressBar">
        <div className="progressValue" style={{ width: `${progress}%` }}></div>
      </div>
      <p className="text">{progress.toFixed(2)}%</p>
    </>
  );
};

export default App;

可以看到，onScroll 事件的事件對(duì)象類型定義為了：React.UIEvent<HTMLDivElement>，參數(shù)為綁定事件的元素的類型。可以通過事件對(duì)象的 currentTarget 屬性來(lái)獲取頁(yè)面滾動(dòng)的相關(guān)值。

在線體驗(yàn)：https://codesandbox.io/s/competent-hellman-qh7non

4. onSubmit

下面來(lái)看看表單的 onSubmit 事件，該事件在表單提交時(shí)觸發(fā)：

import React, { useState } from "react";
import "./styles.css";

const App: React.FunctionComponent = () => {
  const [term, setTerm] = useState("");

  const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
    // 防止頁(yè)面重新加載
    event.preventDefault();
    alert(term);
  };

  return (
    <div className="container">
      <form onSubmit={submitForm}>
        <input
          value={term}
          onChange={(e) => setTerm(e.target.value)}
          type="text"
          className="input"
        />
        <button type="submit" className="btn">
          提交
        </button>
      </form>
    </div>
  );
};

export default App;

表單提交事件的時(shí)間對(duì)象類型為 FormEvent。需要注意，為了防止頁(yè)面在表單的 onSubmit事件觸發(fā)時(shí)重新加載，需要調(diào)用：

event.preventDefault();

在線體驗(yàn)：https://codesandbox.io/s/condescending-danny-e1eerd

5. onCopy、onCut、onPaste

下面來(lái)看看常見的復(fù)制、剪切、粘貼這三個(gè)時(shí)間：

onCopy：在用戶復(fù)制元素或元素的內(nèi)容（如文本、圖像）時(shí)觸發(fā)；
onPaste：在用戶在元素中粘貼一些內(nèi)容時(shí)觸發(fā)；
onCut：在用戶剪切元素的內(nèi)容時(shí)發(fā)生，此事件主要用于 input (`type=”text”``) 和 textarea 元素。

下面來(lái)看一個(gè)例子，當(dāng)進(jìn)行復(fù)制、剪切、粘貼時(shí)，給操作的元素加上一些樣式：

import React, { useState } from "react";
import "./styles.css";

const App: React.FunctionComponent = () => {
  const [text, setText] = useState("hello world");

  // 復(fù)制：onCopy
  const copyHandler = (event: React.ClipboardEvent<HTMLInputElement>) => {
    event.currentTarget.style.border = "3px solid green";
  };

  // 剪切：onCut
  const cutHandler = (event: React.ClipboardEvent<HTMLInputElement>) => {
    event.currentTarget.style.border = "3px solid orange";
    event.currentTarget.style.backgroundColor = "yellow";
    event.currentTarget.disabled = true;
    setText("內(nèi)容被剪切啦");
  };

  // 粘貼：onPaste
  const pasteHandler = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
    event.currentTarget.style.border = "5px solid purple";
    event.currentTarget.style.backgroundColor = "orange";
    event.currentTarget.value = event.clipboardData.getData("text").toUpperCase();
    event.preventDefault();
  };

  return (
    <div className="container">
      <input type="text" value={text} onCopy={copyHandler} onCut={cutHandler} />
      <hr />
      <p>在下方粘貼:</p>
      <textarea onPaste={pasteHandler} className="text-area"></textarea>
    </div>
  );
};

export default App;

可以看到，這三個(gè)事件的事件處理對(duì)象的類型都定義為了 ClipboardEvent，其中傳入的參數(shù)為綁定事件的元素的類型。可以通過 currentTarget 屬性來(lái)獲取事件對(duì)象的屬性。

在線體驗(yàn)：https://codesandbox.io/s/sleepy-keldysh-w5vemj

6. onMouseOver、onMouseOut

onmouseover 和 onmouseout 是常用的兩個(gè)鼠標(biāo)事件：

onmouseover：在鼠標(biāo)指針移動(dòng)到指定的對(duì)象上時(shí)觸發(fā)；
onmouseout：在鼠標(biāo)指針移出指定的對(duì)象時(shí)觸發(fā)。

下面來(lái)看一個(gè)例子，當(dāng)鼠標(biāo)在元素上和移出元素時(shí)給元素添加不同的樣式：

import React from "react";
import "./styles.css";

const App: React.FunctionComponent = () => {
  // 當(dāng)鼠標(biāo)指針位于box上時(shí)，將觸發(fā)此功能
  const boxMouseOverHandler = (event: React.MouseEvent<HTMLDivElement>) => {
    const box: HTMLDivElement = event.currentTarget;
    box.style.backgroundColor = "lightblue";
  };

  // 當(dāng)鼠標(biāo)指針移出box時(shí)，將觸發(fā)此功能
  const boxMouseOutHandler = (event: React.MouseEvent<HTMLDivElement>) => {
    const box: HTMLDivElement = event.currentTarget;
    box.style.backgroundColor = "lightgreen";
  };

  // 當(dāng)鼠標(biāo)指針位于輸入框上時(shí)，將觸發(fā)此功能
  const inputMouseOverHandler = (event: React.MouseEvent<HTMLInputElement>) => {
    const input: HTMLInputElement = event.currentTarget;
    input.style.backgroundColor = "lime";
  };

  //當(dāng)鼠標(biāo)指針移出輸入框時(shí)，將觸發(fā)此功能
  const inputMouseOutHandler = (event: React.MouseEvent<HTMLInputElement>) => {
    const input: HTMLInputElement = event.currentTarget;
    input.style.backgroundColor = "white";
  };

  //當(dāng)鼠標(biāo)指針位于按鈕上時(shí)，將觸發(fā)此功能
  const buttonMouseOverHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
    const btn: HTMLButtonElement = event.currentTarget;
    btn.style.border = "3px solid red";
    btn.style.backgroundColor = "orange";
  };

  // 當(dāng)鼠標(biāo)指針移出按鈕時(shí)，將觸發(fā)此功能
  const buttonMouseOutHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
    const btn: HTMLButtonElement = event.currentTarget;
    btn.style.border = "none";
    btn.style.backgroundColor = "yellow";
  };

  return (
    <div
      className="box"
      onMouseOver={boxMouseOverHandler}
      onMouseOut={boxMouseOutHandler}
    >
      <input
        onMouseOver={inputMouseOverHandler}
        onMouseOut={inputMouseOutHandler}
        placeholder="hello world"
      />
      <button
        onMouseOver={buttonMouseOverHandler}
        onMouseOut={buttonMouseOutHandler}
      >
        Button
      </button>
    </div>
  );
};

export default App;

可以看到，這兩個(gè)事件的事件處理對(duì)象的類型都定義為了 MouseEvent，其中傳入的參數(shù)為綁定事件的元素的類型。可以通過事件對(duì)象的 currentTarget 來(lái)獲取事件對(duì)象的屬性。

在線體驗(yàn)：https://codesandbox.io/s/nervous-cloud-5r6d6p

7. onLoad、onError

onLoad 和 onError 是頁(yè)面外部資源加載相關(guān)的兩個(gè)相關(guān)事件：

onload：資源加載失敗；
onerror：資源加載出錯(cuò)。

下面來(lái)看一個(gè)例子，當(dāng)圖片成功時(shí)給它添加類名 success，加載失敗時(shí)添加類型 error，并更換為備用圖片的URL：

import React from "react";
import "./styles.css";

const IMAGE ="https://resource-1255585089.cos.ap-beijing.myqcloud.com/111.png";
const FALLBACK_IMAGE ="https://resource-1255585089.cos.ap-beijing.myqcloud.com/222.png";

const App: React.FunctionComponent = () => {
  const imageOnLoadHandler = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
    // 圖片加載成功時(shí)，打印圖片的地址，并添加類名 success
    console.log(event.currentTarget.src);
    if (event.currentTarget.className !== "error") {
      event.currentTarget.className = "success";
    }
  };

  const imageOnErrorHandler = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
    // 圖片加載失敗時(shí)，加載替代的圖片，并添加類名 error
    event.currentTarget.src = FALLBACK_IMAGE;
    event.currentTarget.className = "error";
  };

  return (
    <div className="container">
      <img
        src={IMAGE}
        onLoad={imageOnLoadHandler}
        onError={imageOnErrorHandler}
        alt="111"
      />
    </div>
  );
};

export default App;

可以看到，這兩個(gè)事件的事件處理對(duì)象的類型都定義為了 SyntheticEvent，其中傳入的第一個(gè)參數(shù)為綁定事件的元素的類型。可以通過事件對(duì)象的 currentTarget 屬性來(lái)獲取事件對(duì)象的屬性。

在線體驗(yàn)：https://codesandbox.io/s/determined-tamas-rjwjoq

8. onkeydown、onkeypress、onkeyup

下面來(lái)看幾個(gè)常見的鍵盤事件：

onKeyDown：在用戶按下一個(gè)鍵盤按鍵時(shí)觸發(fā)；
onKeyUp：在鍵盤按鍵被松開時(shí)觸發(fā)；
onKeyPress：在鍵盤按鍵被按下并釋放一個(gè)鍵時(shí)發(fā)生。在所有瀏覽器中 onkeypress 事件只能監(jiān)聽字母和數(shù)字，不能監(jiān)聽一些特殊按鍵（ALT、CTRL、SHIFT、ESC、箭頭等）。監(jiān)聽一個(gè)用戶是否按下按鍵請(qǐng)使用 onkeydown 事件，所有瀏覽器都支持 onkeydown 事件。

這三個(gè)事件的執(zhí)行順序如下：

onkeydown
onkeypress
onkeyup

來(lái)看一個(gè)例子，按下ESC鍵可以清除已經(jīng)輸入的文本，按下Enter鍵可以彈出已經(jīng)輸入的文本：

import React, { useState } from "react";
import "./styles.css";

const App: React.FunctionComponent = () => {
  const [enteredText, setEnteredText] = useState("");

  // onKeyDown 事件處理函數(shù)
  const keyDownHandler = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.code === "Enter") {
      alert(`輸入內(nèi)容："${enteredText}"`);
    }
  };

  // onKeyUp 事件處理函數(shù)
  const keyUpHandler = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.code === "Escape") {
      const confirm = window.confirm("確定清除文本嗎？");

      if (confirm) {
        setEnteredText("");
      }
    }
  };

  // onKeyPress 事件處理函數(shù)
  const keyPressHandler = (event: React.KeyboardEvent<HTMLInputElement>) => {
    //...
  };

  return (
    <div className="container">
      <input
        onKeyDown={keyDownHandler}
        onKeyUp={keyUpHandler}
        onKeyPress={keyPressHandler}
        type="text"
        className="text-input"
        value={enteredText}
        onChange={(e) => setEnteredText(e.target.value)}
      />
    </div>
  );
};

export default App;

這三個(gè)事件的事件對(duì)象類型都是 KeyboardEvent。可以通過事件對(duì)象的 code屬性獲取按下的鍵盤鍵值。

在線體驗(yàn)：https://codesandbox.io/s/prod-sky-txwzgd

再來(lái)看一個(gè)簡(jiǎn)單的例子，通過在鍵盤上按下上下左右鍵使得盒子在頁(yè)面上移動(dòng)：

import React, { useState } from "react";
import "./styles.css";

const App: React.FunctionComponent = () => {
  const [left, setLeft] = useState(0);
  const [top, setTop] = useState(0);

  // onKeyDown 事件處理函數(shù)
  const keyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {
    console.log(event.code);
    if (event.code === "ArrowUp") {
      setTop((top) => top - 10);
    }

    if (event.code === "ArrowDown") {
      setTop((top) => top + 10);
    }

    if (event.code === "ArrowLeft") {
      setLeft((left) => left - 10);
    }

    if (event.code === "ArrowRight") {
      setLeft((left) => left + 10);
    }
  };

  return (
    <div className="container" tabIndex={0} onKeyDown={keyDownHandler}>
      <div className="box" style={{ top: top, left: left }}></div>
    </div>
  );
};

export default App;

在線體驗(yàn)：https://codesandbox.io/s/hungry-meninsky-zhkbzb

9. onFocus、onBlur

onfocus：在元素獲得焦點(diǎn)時(shí)觸發(fā)，適用于<input>、<select> 以及<a>標(biāo)簽；
onblur：在元素失去焦點(diǎn)時(shí)觸發(fā)，常用于表單驗(yàn)證。

下面來(lái)看一個(gè)例子，在輸入框中輸入內(nèi)容，輸入過程中保存輸入的值，當(dāng)輸入完成，失去輸入焦點(diǎn)時(shí)，對(duì)輸入內(nèi)容進(jìn)行校驗(yàn)：

import React, { useState } from "react";
import "./styles.css";

const App: React.FunctionComponent = () => {
  const [name, setName] = useState("");
  const [isValid, setIsValid] = useState(false);
  const [isFocus, setIsFocus] = useState(false);
  const [isBlur, setIsBlur] = useState(false);

  // 處理 input 的 onChange事件
  const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

  // 處理 input 的 onFocus 事件
  const focusHandler = (event: React.FocusEvent<HTMLInputElement>) => {
    setIsFocus(true);
    setIsBlur(false);
    console.log(event);
  };

  // 處理 input 的 onBlur 事件
  const blurHandler = (event: React.FocusEvent<HTMLInputElement>) => {
    setIsFocus(false);
    setIsBlur(true);

    if (name.match(/^[a-z][a-z\s]*$/i)) {
      setIsValid(true);
    } else {
      setIsValid(false);
    }
    console.log(event);
  };

  return (
    <div className="container">
      <input
        type="text"
        onFocus={focusHandler}
        onBlur={blurHandler}
        value={name}
        onChange={changeHandler}
        className="input"
        placeholder="請(qǐng)輸入名字"
      />
      {isFocus && <span className="hint">只能輸入字母和空格</span>}
      {isBlur && !isValid && <p className="error">輸入格式錯(cuò)誤</p>}
      {isBlur && isValid && <p className="success">輸入正確</p>}
    </div>
  );
};

export default App;

這里兩個(gè)事件的事件對(duì)象類型都是 FocusEvent，傳入的參數(shù)是 input 元素的類型。

在線體驗(yàn)：https://codesandbox.io/s/spring-moon-roegc5

10. onDragStart、onDrop、onDragOver

拖拽操作在HTML5 是作為標(biāo)準(zhǔn)的一部分。能夠使用HTML5所支持的事件和屬性來(lái)實(shí)現(xiàn)拖拽操作。下面是三個(gè)常用的拖拽事件：

onDragStart：開始拖拽時(shí)觸發(fā)，事件里利用dataTransfer保存拖拽元素的 class 或 id。
onDrop：元素放置時(shí)不斷觸發(fā)，事件里利用dataTransfer來(lái)獲取所保存的數(shù)據(jù)，并進(jìn)行業(yè)務(wù)處理。
onDragOver：在拖拽時(shí)不斷觸發(fā)，在其中取消默認(rèn)行為可以保證該標(biāo)簽可以放置拖拽元素。

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<string>("Drop Something Here");

  // 開始拖拽時(shí)觸發(fā)改事件
  const dragStartHandler = (event: React.DragEvent<HTMLDivElement>, data: string) => {
    event.dataTransfer.setData("text", data);
  };

  // 在放置時(shí)觸發(fā)該事件
  const dropHandler = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text");
    setContent(data);
  };

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

  return (
    <div className="container">
      <div
        className="box1"
        onDragStart={(event) => dragStartHandler(event, PHOTO_URL)}
        draggable={true}
      >
        <img src={PHOTO_URL} alt="111" />
      </div>

      <div
        className="box2"
        onDragStart={(event) => dragStartHandler(event, "黃色卡片")}
        draggable={true}
      ></div>

      <div className="box3" onDragOver={allowDrop} onDrop={dropHandler}>
        {content.endsWith(".png") ? (
          <img src={content} alt="" />
        ) : (
          <h2>{content}</h2>
        )}
      </div>
    </div>
  );
};

export default App;

可以看到，兩個(gè)拖拽事件的事件對(duì)象類型都是 DragEvent。可以通過事件對(duì)象的 dataTransfer 來(lái)獲取事件對(duì)象的屬性。

在線體驗(yàn)：https://codesandbox.io/s/crazy-cloud-5jejr1

11. window.resize

可以使用以下兩種方式之一來(lái)設(shè)置事件處理函數(shù)：

window.resize = myHandlerFunction;

window.addEventListener('resize', myHandlerFunction);

在 React 中，要在瀏覽器窗口大小發(fā)生變化時(shí)重新渲染組件，可以使用 useStatehook 來(lái)實(shí)現(xiàn)：

useEffect(() => {
  window.onresize = myHandlerFunction;
}, []);

useEffect(() => {
  window.addEventListener('resize', myHandlerFunction);
}, []);

下面來(lái)看一個(gè)例子，在改變?yōu)g覽器窗口的大小時(shí)，頁(yè)面實(shí)時(shí)顯示瀏覽器窗口的長(zhǎng)度和寬度，并在不同寬度時(shí)顯示不同的背景色：

import React, { useState, useEffect, FunctionComponent } from "react";
import "./styles.css";

interface Size {
  width: number;
  height: number;
}

const App: FunctionComponent = () => {
  const [size, setSize] = useState<Size>();

  const resizeHanlder = () => {
    const width = window.innerWidth;
    const height = window.innerHeight;

    setSize({
      width: width,
      height: height,
    });
  };

  useEffect(() => {
    window.onresize = resizeHanlder;
  }, []);

  return (
    <div
      className="container"
      style={{
        backgroundColor:
          !size || size.width <= 500
            ? "white"
            : size && size.width <= 700
              ? "green"
              : "orange",
      }}
    >
      {size && (
        <>
          <h2>Width: {size.width}</h2>
          <h2>Height: {size.height}</h2>
        </>
      )}
    </div>
  );
};

export default App;

在線體驗(yàn)：https://codesandbox.io/s/async-leaf-m62ixj