「React TS3 專題」使用 TS 的方式在類組件里定義事件
- 2019 年 10 月 10 日
- 筆記
在「React TS3 專題」親自動手創建一個類組件，我們一起學習了如何用 TS 的方式在React 里定義類組件（class component）以及了解了什麼是 JSX。本篇文章，筆者將帶著大家一起了解下如何使用 TS 的方式在 React 里定義類組件事件。
簡單的定義事件
最簡單的方式就是在JSX里添加事件，上一小節，我們熟悉了如何在 JSX 添加屬性，因此很自然的想到，我們可以在 JSX 里添加事件：
1、第一步在上一小節例子的基礎上，我們添加按鈕的點擊事件，在確認按鈕上添加點擊事件屬性，程式碼如下：
<button className="confirm-ok" onClick={this.handleOkClick}> ... </button>
我們點擊按鈕時就觸發調用 handleOkClick 方法。
2、接下來我們創建 handleOkClick 方法：
private handleOkClick() { console.log("Ok clicked"); }
3、接下來我們運行下我們的項目
通過啟動命令運行項目，我們來點擊確認按鈕，就會看到如下圖所示的提示：
關於this的問題
上述的事件方法里還存在一個隱藏的風險，比如我們調用this屬性時，我們來看看會發生什麼。
1、首先我們來修改點擊事件的方法：
private handleOkClick() { console.log("Ok clicked", this.props); }
然後我們運行下程式，嘗試下去點擊確認按鈕，不出意外的話，你將會看到如下圖的報錯提示：
造成這樣的問題是this不能指向我們當前組件的類，提示相關屬性是未定義的，常用的解決方案，就是把這種函數改成箭頭函數，利用箭頭函數this的穿透性，就解決了，關於箭頭函數的使用問題，筆者的這篇文章「ES6基礎」箭頭函數（Arrow functions）有詳細的介紹，不明白的可以去點擊查看。
2、接下來我們將函數修改成箭頭函數
private handleOkClick = () => { console.log("Ok clicked", this.props); };
我們運行下項目，你就會在頁面控制台，看到如下的輸出，很好，如你所願沒有報錯：
3、接下來，我們在取消按鈕里添加取消事件：
<button className="confirm-cancel" onClick={this.handleCancelClick}> ... </button>
4、最後我們來定義取消按鈕事件的方法
private handleCancelClick = () => { console.log("Cancel clicked", this.props); };
總而言之，為了避免this引發的風險問題，我們可以使用箭頭函數進行有效避免此類問題，接下來我們繼續聊聊如何更好的在事件定義里組織邏輯，通過屬性的方式進行傳遞，更方便組件的重用性。
在介面里定義事件屬性
上一篇文章，我們通過介面的方式定義了屬性，接下來我們使用定義介面的方式實現事件的定義，示例程式碼如下：
1、首先接著上篇文章的示例，我們在介面添加如下兩個待實現的方法，示例如下：
interface IProps { title: string; content: string; cancelCaption?: string; okCaption?: string; onOkClick: () => void; onCancelClick: () => void; }
我們定義的事件屬性是必填的，因此你會在App.tsx文件里，會提示這兩個屬性沒有定義，稍後我們會解決此問題。
2、接下來我們在 Confirm.tsx 文件里實現介面相關方法的定義，示例程式碼如下：
private handleCancelClick = () => { this.props.onCancelClick(); }; private handleOkClick = () => { this.props.onOkClick(); };
3、接下來我們在 App.tsx 定義相關方法，修改出現的錯誤問題，示例程式碼如下：
const handleCancelConfirmClick = () => { console.log("Cancel clicked"); }; const handleOkConfirmClick = () => { console.log("Ok clicked"); };
4、最後我們在Confirm組件里添加上事件屬性
<Confirm ... onCancelClick={this.handleCancelConfirmClick} onOkClick={this.handleOkConfirmClick} />
修改完後，我們啟動項目，然後點擊組件的確認和取消按鈕，你將會看到以下內容：
小節
今天的文章我們就到這裡，內容不是太多，我們一起學習了如何在React里使用TS的方法定義事件，以及使用箭頭函數的方式進行事件方法的實現，接下來的文章，筆者將繼續介紹，在React里如何用 TS 的方式定義 State。
