React + TypeScript：如何處理常見事件？
作者：CUGGZ
在 React 中是不支持直接定義 onResize 事件的?？梢允褂脼g覽器原生支持的 window.resize 事件，當(dāng)瀏覽器窗口發(fā)生變化時會觸發(fā)改事件。
大家好，我是 CUGGZ。之前分享過一篇《使用 TypeScript 編寫 React 的最佳實踐！》，文中介紹了 React 和 TypeScript 搭配使用的一些常見用法。其中第四部分介紹了在React的事件處理中如何定義事件類型，下面來通過一些簡單的 Demo （每個 Demo 后面都有 CodeSandBox 的在線體驗地址）看看如何在 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事件。
下面先來看看按鈕的 onClick 事件，當(dāng)點擊按鈕時，在頁面顯示按鈕的名稱：
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 !== "" ? `點擊了 ${clickedButton}` : "沒有點擊任何按鈕"}
</h1>
</div>
);
};
export default App;可以看到，onClick 事件的事件處理對象的類型都定義為了 MouseEvent，其中傳入的參數(shù)為綁定事件的元素的類型。可以通過事件對象的 currentTarget 屬性來獲取點擊元素的屬性。
在線體驗：https://codesandbox.io/s/dawn-feather-8gofq1
再來看看任意元素的 onClick事件，點擊一個元素時，在控制臺打印點擊元素的類型、長度、寬度：
import React from "react";
import "./styles.css";
const App: React.FunctionComponent = () => {
// 當(dāng) container 被點擊時，觸發(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 被點擊時，觸發(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)圖片被點擊時，觸發(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 事件的事件處理對象的類型都定義為了 MouseEvent，其中傳入的參數(shù)為綁定事件的元素的類型。需要注意，在任意元素上添加點擊事件時，會觸發(fā)事件冒泡，比如上面的例子，當(dāng)點擊是圖片或者h(yuǎn)1標(biāo)簽時就會導(dǎo)致其父元素div的點擊事件觸發(fā)。可以使用下面的代碼來避免默認(rèn)事件：
event.stopPropagation();在線體驗：https://codesandbox.io/s/serverless-glade-g41upi
2. onChange
下面來看看 onChange 事件，先來看 select 元素的 onChange 事件的例子，當(dāng)選中元素時，選中元素的值會顯示在頁面上：
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>
選擇一個
</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 的事件對象類型為 ChangeEvent，傳入的參數(shù)為 select 元素的類型。可以通過 target 屬性來獲取 select選中的值。
在線體驗：https://codesandbox.io/s/frosty-lichterman-33fpky
input 元素的 onChange 事件的例子，在輸入框中輸入內(nèi)容，點擊搜索按鈕，在頁面顯示搜索結(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)容改變時觸發(fā)
const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
const enteredName = event.target.value;
setQuery(enteredName);
};
// 點擊搜索時觸發(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 的事件處理對象的類型為 ChangeEvent。要想獲取輸入的值需要從事件對象的 target 屬性中獲取。
在線體驗：https://codesandbox.io/s/pedantic-murdock-lejmg6
3. onScroll
onScroll 事件在元素的滾動條被滾動時觸發(fā)。
下面來看一個例子，當(dāng)元素發(fā)生滾動時，計算滾動了多少的元素，從而計算頁面滾動進(jìn)度的百分比值，并顯示在頁面上：
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ā)生滾動時觸發(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 事件的事件對象類型定義為了：React.UIEvent<HTMLDivElement>，參數(shù)為綁定事件的元素的類型?？梢酝ㄟ^事件對象的 currentTarget 屬性來獲取頁面滾動的相關(guān)值。
在線體驗：https://codesandbox.io/s/competent-hellman-qh7non
4. onSubmit
下面來看看表單的 onSubmit 事件，該事件在表單提交時觸發(fā)：
import React, { useState } from "react";
import "./styles.css";
const App: React.FunctionComponent = () => {
const [term, setTerm] = useState("");
const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
// 防止頁面重新加載
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;表單提交事件的時間對象類型為 FormEvent。需要注意，為了防止頁面在表單的 onSubmit事件觸發(fā)時重新加載，需要調(diào)用：
event.preventDefault();在線體驗：https://codesandbox.io/s/condescending-danny-e1eerd
5. onCopy、onCut、onPaste
下面來看看常見的復(fù)制、剪切、粘貼這三個時間：
- onCopy：在用戶復(fù)制元素或元素的內(nèi)容（如文本、圖像）時觸發(fā)；
- onPaste：在用戶在元素中粘貼一些內(nèi)容時觸發(fā)；
- onCut：在用戶剪切元素的內(nèi)容時發(fā)生，此事件主要用于 input (`type=”text”``) 和 textarea 元素。
下面來看一個例子，當(dāng)進(jìn)行復(fù)制、剪切、粘貼時，給操作的元素加上一些樣式：
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;可以看到，這三個事件的事件處理對象的類型都定義為了 ClipboardEvent，其中傳入的參數(shù)為綁定事件的元素的類型?？梢酝ㄟ^ currentTarget 屬性來獲取事件對象的屬性。
在線體驗：https://codesandbox.io/s/sleepy-keldysh-w5vemj
6. onMouseOver、onMouseOut
onmouseover 和 onmouseout 是常用的兩個鼠標(biāo)事件：
- onmouseover：在鼠標(biāo)指針移動到指定的對象上時觸發(fā)；
- onmouseout：在鼠標(biāo)指針移出指定的對象時觸發(fā)。
下面來看一個例子，當(dāng)鼠標(biāo)在元素上和移出元素時給元素添加不同的樣式：
import React from "react";
import "./styles.css";
const App: React.FunctionComponent = () => {
// 當(dāng)鼠標(biāo)指針位于box上時，將觸發(fā)此功能
const boxMouseOverHandler = (event: React.MouseEvent<HTMLDivElement>) => {
const box: HTMLDivElement = event.currentTarget;
box.style.backgroundColor = "lightblue";
};
// 當(dāng)鼠標(biāo)指針移出box時，將觸發(fā)此功能
const boxMouseOutHandler = (event: React.MouseEvent<HTMLDivElement>) => {
const box: HTMLDivElement = event.currentTarget;
box.style.backgroundColor = "lightgreen";
};
// 當(dāng)鼠標(biāo)指針位于輸入框上時，將觸發(fā)此功能
const inputMouseOverHandler = (event: React.MouseEvent<HTMLInputElement>) => {
const input: HTMLInputElement = event.currentTarget;
input.style.backgroundColor = "lime";
};
//當(dāng)鼠標(biāo)指針移出輸入框時，將觸發(fā)此功能
const inputMouseOutHandler = (event: React.MouseEvent<HTMLInputElement>) => {
const input: HTMLInputElement = event.currentTarget;
input.style.backgroundColor = "white";
};
//當(dāng)鼠標(biāo)指針位于按鈕上時，將觸發(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)指針移出按鈕時，將觸發(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;可以看到，這兩個事件的事件處理對象的類型都定義為了 MouseEvent，其中傳入的參數(shù)為綁定事件的元素的類型?？梢酝ㄟ^事件對象的 currentTarget 來獲取事件對象的屬性。
在線體驗：https://codesandbox.io/s/nervous-cloud-5r6d6p
7. onLoad、onError
onLoad 和 onError 是頁面外部資源加載相關(guān)的兩個相關(guān)事件：
- onload：資源加載失?。?/li>
- onerror：資源加載出錯。
下面來看一個例子， 當(dāng)圖片成功時給它添加類名 success，加載失敗時添加類型 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>) => {
// 圖片加載成功時，打印圖片的地址，并添加類名 success
console.log(event.currentTarget.src);
if (event.currentTarget.className !== "error") {
event.currentTarget.className = "success";
}
};
const imageOnErrorHandler = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
// 圖片加載失敗時，加載替代的圖片，并添加類名 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;可以看到，這兩個事件的事件處理對象的類型都定義為了 SyntheticEvent，其中傳入的第一個參數(shù)為綁定事件的元素的類型。可以通過事件對象的 currentTarget 屬性來獲取事件對象的屬性。
在線體驗：https://codesandbox.io/s/determined-tamas-rjwjoq
8. onkeydown、onkeypress、onkeyup
下面來看幾個常見的鍵盤事件：
- onKeyDown：在用戶按下一個鍵盤按鍵時觸發(fā)；
- onKeyUp：在鍵盤按鍵被松開時觸發(fā)；
- onKeyPress：在鍵盤按鍵被按下并釋放一個鍵時發(fā)生。在所有瀏覽器中 onkeypress 事件只能監(jiān)聽字母和數(shù)字，不能監(jiān)聽一些特殊按鍵（ALT、CTRL、SHIFT、ESC、箭頭等）。監(jiān)聽一個用戶是否按下按鍵請使用 onkeydown 事件，所有瀏覽器都支持 onkeydown 事件。
這三個事件的執(zhí)行順序如下：
- onkeydown
- onkeypress
- onkeyup
來看一個例子，按下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;這三個事件的事件對象類型都是 KeyboardEvent?？梢酝ㄟ^事件對象的 code屬性獲取按下的鍵盤鍵值。
在線體驗：https://codesandbox.io/s/prod-sky-txwzgd
再來看一個簡單的例子，通過在鍵盤上按下上下左右鍵使得盒子在頁面上移動：
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;在線體驗：https://codesandbox.io/s/hungry-meninsky-zhkbzb
9. onFocus、onBlur
- onfocus：在元素獲得焦點時觸發(fā)，適用于<input>、<select> 以及<a>標(biāo)簽；
- onblur：在元素失去焦點時觸發(fā)，常用于表單驗證。
下面來看一個例子，在輸入框中輸入內(nèi)容，輸入過程中保存輸入的值， 當(dāng)輸入完成，失去輸入焦點時，對輸入內(nèi)容進(jì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="請輸入名字"
/>
{isFocus && <span className="hint">只能輸入字母和空格</span>}
{isBlur && !isValid && <p className="error">輸入格式錯誤</p>}
{isBlur && isValid && <p className="success">輸入正確</p>}
</div>
);
};
export default App;這里兩個事件的事件對象類型都是 FocusEvent，傳入的參數(shù)是 input 元素的類型。
在線體驗：https://codesandbox.io/s/spring-moon-roegc5
10. onDragStart、onDrop、onDragOver
拖拽操作在HTML5 是作為標(biāo)準(zhǔn)的一部分。能夠使用HTML5所支持的事件和屬性來實現(xiàn)拖拽操作。下面是三個常用的拖拽事件：
- onDragStart：開始拖拽時觸發(fā)，事件里利用dataTransfer保存拖拽元素的 class 或 id。
- onDrop：元素放置時不斷觸發(fā)，事件里利用dataTransfer來獲取所保存的數(shù)據(jù)，并進(jìn)行業(yè)務(wù)處理。
- onDragOver：在拖拽時不斷觸發(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");
// 開始拖拽時觸發(fā)改事件
const dragStartHandler = (event: React.DragEvent<HTMLDivElement>, data: string) => {
event.dataTransfer.setData("text", data);
};
// 在放置時觸發(fā)該事件
const dropHandler = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
const data = event.dataTransfer.getData("text");
setContent(data);
};
// 使得第三個盒子可以放下
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;可以看到，兩個拖拽事件的事件對象類型都是 DragEvent?？梢酝ㄟ^事件對象的 dataTransfer 來獲取事件對象的屬性。
在線體驗：https://codesandbox.io/s/crazy-cloud-5jejr1
11. window.resize
在 React 中是不支持直接定義 onResize 事件的。可以使用瀏覽器原生支持的 window.resize 事件，當(dāng)瀏覽器窗口發(fā)生變化時會觸發(fā)改事件。
可以使用以下兩種方式之一來設(shè)置事件處理函數(shù)：
window.resize = myHandlerFunction;
window.addEventListener('resize', myHandlerFunction);在 React 中，要在瀏覽器窗口大小發(fā)生變化時重新渲染組件，可以使用 useStatehook 來實現(xiàn)：
useEffect(() => {
window.onresize = myHandlerFunction;
}, []);
useEffect(() => {
window.addEventListener('resize', myHandlerFunction);
}, []);下面來看一個例子，在改變?yōu)g覽器窗口的大小時，頁面實時顯示瀏覽器窗口的長度和寬度，并在不同寬度時顯示不同的背景色：
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;在線體驗：https://codesandbox.io/s/async-leaf-m62ixj
12. 備忘錄
常見的 Event 事件對象如下：
- 剪切板事件對象：ClipboardEvent<T = Element>
- 拖拽事件對象：DragEvent<T = Element>
- 焦點事件對象：FocusEvent<T = Element>
- 表單事件對象：FormEvent<T = Element>
- Change事件對象：ChangeEvent<T = Element>
- 鍵盤事件對象：KeyboardEvent<T = Element>
- 鼠標(biāo)事件對象：MouseEvent<T = Element, E = NativeMouseEvent>
- 觸摸事件對象：TouchEvent<T = Element>
- 滾輪事件對象：WheelEvent<T = Element>
- 動畫事件對象：AnimationEvent<T = Element>
- 過渡事件對象：TransitionEvent<T = Element>
常見的元素類型如下：
- a: HTMLAnchorElement
- body: HTMLBodyElement
- br: HTMLBRElement
- button: HTMLButtonElement
- div: HTMLDivElement
- h1: HTMLHeadingElement
- h2: HTMLHeadingElement
- h3: HTMLHeadingElement
- html: HTMLHtmlElement
- img: HTMLImageElement
- input: HTMLInputElement
- ul: HTMLUListElement
- li: HTMLLIElement
- link: HTMLLinkElement
- p: HTMLParagraphElement
- span: HTMLSpanElement
- style: HTMLStyleElement
- table: HTMLTableElement
- tbody: HTMLTableSectionElement
- video: HTMLVideoElement
- audio: HTMLAudioElement
- meta: HTMLMetaElement
- form: HTMLFormElement
責(zé)任編輯：武曉燕
來源：
前端充電寶
