React 事件管理指南

簡介

事件通常代表用戶和應用程序之間的某種類型的交互 - 任何時候用戶單擊對象、在輸入字段中鍵入、拖放某些元素等等。因此，每個事件通常都需要某種類型的反應 從應用程序。每次發生重大事件時，作為程序員，我們都可以定義一個函數來響應發生的事件。這些函數稱為事件處理程序 ，它們是任何編程語言中事件管理的核心。 活動管理 是一組用於處理的技術 事件。

DOM 和 React 事件處理的區別

如果您使用 React，您可能已經熟悉 DOM 事件 在 JavaScript 中：

<!- JavaScript event ->
<button onclick="handleClick()">
    Trigger Function
</button>

這是onclick DOM 事件。單擊此示例按鈕時，handleClick() 函數被調用——這是事件管理的基本原理。這個基本思想在 JavaScript 和 React 之間是相同的，但是兩者之間存在一些細微差別。

首先，事件命名有一個細微差別——React 使用 駝峰式 名稱而不是 小寫 JavaScript 使用的名稱。快速查看前面的示例後，您會注意到事件的名稱是 onclick ，而 React 的替代方案是 onClick .此外，React 使用了 JSX (JavaScript XML) ，它允許我們將函數作為事件處理程序（在花括號內）而不是字符串傳遞：

<!- React event ->
<button onClick={handleClick}>
    Trigger Function
</button>

注意我們沒有調用 handleClick 大括號內的函數 - 通過 {handleClick()} 調用它 每次渲染元素時都會調用處理函數。我們使用的語法確保僅在註冊事件時調用處理函數。

通常，您會發現自己處於想要在事件註冊後阻止默認行為的情況。例如，onsubmit JavaScript 事件在用戶單擊提交按鈕後註冊。默認行為是適當地發送表單數據並重新加載網頁，但我們可能需要阻止重新加載頁面。 JavaScript 有一個方便的技巧來防止默認行為：

<form onsubmit="console.log('You clicked submit.'); return false">
    <button type="submit">Submit</button>
</form>

我們以通常的方式定義了處理函數，但請注意我們是如何添加 return false 在處理函數定義之後。這就是 JavaScript 開發人員在處理事件時防止默認行為的方式。如果你不放 return false 在本例中的處理函數之後，頁面將在控制台甚至有機會記錄消息之前重新加載。

注意： 事件處理函數可以在 JavaScript 文件中定義，並在檢測到事件時在 HTML 中調用。或者，您也可以直接在 HTML 代碼中定義和調用處理函數（如上例所示）。

React 根本不支持這個技巧！為了防止 React 中的默認行為，您必須顯式調用 preventDefault ：

function Form() {
    function handleSubmit(e) {
        e.preventDefault();
        console.log("You clicked submit.");
    }

    return (
        <form onSubmit={handleSubmit}>
            <button type="submit">Submit</button>
        </form>
    );
}

也許不像 JavaScript 中的事件處理那麼簡單，但肯定是一種更健壯的事件處理方式。這個例子說明了在 React 中與功能組件一起使用的事件處理。我們只是在組件中聲明了一個處理函數，並在 return() 中調用它 方法。

注意： React 負責跨瀏覽器的兼容性，所以你不必擔心！

在功能組件中處理事件

事件處理程序作為屬性傳遞給功能組件中的元素或組件。當用戶與元素交互時，該屬性接收一個描述發生了什麼的函數。

處理onClick 事件

如果用戶多次點擊元素，onClick 事件被觸發並且函數被多次調用，就像任何其他事件一樣。讓我們看看它在實踐中的樣子，我們將創建一個按鈕並調用一個函數：

const App = () => {
    const handleClick = () => {
        console.log("This function has been triggered!");
    };

    return (
        <div className="App">
            <h1>Hello World</h1>
            <button onClick={handleClick}>Trigger Function</button>
        </div>
    );
};

這將註銷“此功能已被觸發！” 在控制台中。

將參數傳遞給事件

如果我們想將參數或值傳遞給被觸發的函數，我們必須使用箭頭函數或實際函數。在我們的例子中，假設我們想向函數傳遞一個值，然後將其記錄到控制台中：

const App = () => {
    const handleClick = (name) => {
        console.log("My Name is:", name);
    };
    return (
        <div className="App">
            <h1>Hello World</h1>
            <button onClick={() => handleClick("John Doe")}>
                Trigger Function
            </button>
        </div>
    );
};

這將顯示“我的名字是：John Doe ” 在控制台中。我們也可以使用 function 關鍵字來使用一個實際的函數，一切仍然可以正常工作：

<button onClick={function(){handleClick('John Doe')}}>Trigger Function</button>

處理onSubmit 事件

當用戶單擊提交按鈕或敲擊鍵盤上的回車鍵時，我們還可以使用 React 處理表單提交事件。這類似於 onClick 事件：

const App = () => {
    const handleSubmit = () => {
        console.log("The submit button was clicked!");
    };

    return (
        <div className="App">
            <h1>Hello World</h1>
            <form onSubmit={handleSubmit}>
                <label>Name</label>
                <input type="text" />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
};

"點擊了提交按鈕！ " 將因此被註銷。但是，由於瀏覽器會立即重新加載，我們將使用 preventDefault() 防止瀏覽器執行默認操作的方法。

const handleSubmit = (e) => {
    e.preventDefault();
    console.log("The submit button was clicked!");
};

在類組件中處理事件

類組件處理事件的方式與功能組件類似，但有一些細微差別。讓我們創建一個調用 handleClick 的按鈕 點擊時的功能：

class App extends React.Component {
    handleClick = () => {
        console.log("This function has been triggered!");
    };
    render() {
        return (
            <div className="App">
                <h1>Hello World</h1>
                <button onClick={this.handleClick}>Trigger Function</button>
            </div>
        );
    }
}

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

注意： 我們必須使用 this 關鍵字，因為我們在 App 類和 handleClick 是該類的成員函數之一。

將參數傳遞給事件

最好將處理函數聲明為類組件中的方法。如果你想稍後將參數、props 或狀態傳遞給渲染的組件，則必須將事件處理函數綁定到 this 在構造函數內部。

假設我們有一個狀態值集，當單擊特定按鈕時我們想要更改它並且我們想要使用傳遞的參數，我們會有類似的東西，但它會拋出錯誤 ：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "Welcome, We are glad you are here!"
        };
    }

    handleClick = (name) => {
        console.log("This function has been triggered!", name);
        this.setState({
            title: `Hello ${name}!`
        });
    };
    render() {
        return (
            <div className="App">
                <h1>{this.state.title}</h1>
                <button onClick={this.handleClick("Joel")}>
                    Trigger Function
                </button>
            </div>
        );
    }
}

為了解決這個問題，我們要么使用箭頭函數 或 Function.prototype.bind] 綁定 this 關鍵詞：

<button onClick={() => this.handleClick("John Doe")}>Trigger Function</button>
<button onClick={this.handleClick.bind(this, "John Doe")}>Trigger Function</button>

處理onSubmit 事件

我們也可以用類組件處理所有類型的事件，只要我們使用this 聲明方法時使用關鍵字而不是函數：

class App extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        console.log("The submit button was clicked!");
    };
    render() {
        return (
            <div className="App">
                <h1>Hello World</h1>
                <form onSubmit={this.handleSubmit}>
                    <label>Name</label>
                    <input type="text" />
                    <button type="submit">Submit</button>
                </form>
            </div>
        );
    }
}

結論

我們在本指南中看到 React 事件與 JavaScript 事件非常相似，只是在語法和傳播行為方面存在一些差異。我們還了解了函數式組件和類組件中使用的事件處理程序之間的區別，類組件需要將處理程序綁定到 this .在 React 中可以處理更多的事件，但它們都以與 onClick 相同的方式運行 方法，無論是在函數式還是類組件中。