自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Blazor 組件之間使用 EventCallback 進(jìn)行通信

作者：技術(shù)譯民
開發(fā) 開發(fā)工具
Blazor 應(yīng)用程序是相互交互的多個(gè) Blazor 組件的集合，我們可以在其他父組件中使用子組件。在實(shí)際的應(yīng)用程序中，將數(shù)據(jù)或事件信息從一個(gè)組件傳遞到另一組件是一種十分常見的場景。

[[414665]]

本文轉(zhuǎn)載自微信公眾號「技術(shù)譯站」，作者技術(shù)譯民。轉(zhuǎn)載本文請聯(lián)系技術(shù)譯站公眾號。

Blazor 應(yīng)用程序是相互交互的多個(gè) Blazor 組件的集合，我們可以在其他父組件中使用子組件。在實(shí)際的應(yīng)用程序中，將數(shù)據(jù)或事件信息從一個(gè)組件傳遞到另一組件是一種十分常見的場景。您可能會(huì)有一個(gè)頁面，其中一個(gè)組件中發(fā)生的用戶操作需要更新其他組件中的某些 UI。通常使用 EventCallback 委托來處理這種類型的通信。在本教程中，我將介紹如何使用 EventCallback 在父組件和子組件之間進(jìn)行通信。

下面是使用 EventCallback 從子組件到父組件進(jìn)行通信所涉及的通用步驟。

  1. 在子組件中聲明一個(gè) EventCallback 或 EventCallback 委托
  2. 在父組件中附加一個(gè)到子組件的 EventCallback 或 EventCallback 的回調(diào)方法
  3. 當(dāng)子組件想要與父組件通信時(shí)，可以使用以下方法之一調(diào)用父組件的回調(diào)方法。
  • InvokeAsync(Object) – 如果使用的是 EventCallback
  • InvokeAsync(T) – 如果使用的是 EventCallback

為了理解上述步驟，讓我們創(chuàng)建一個(gè)簡單的待辦事項(xiàng)列表(To Do List)示例。首先，在 Data 文件夾中創(chuàng)建以下 ToDo.cs 類。這是一個(gè)簡單類，用于存儲(chǔ)每個(gè)待辦事項(xiàng)的 Title 和 Minutes 屬性。Minutes 屬性指定完成特定待辦事項(xiàng)所需的時(shí)間。

ToDo.cs

  1. public class ToDo 
  2. { 
  3.     public string Title { get; set; } 
  4.     public int Minutes { get; set; } 
  5. } 

在項(xiàng)目中添加以下 ToDoList.razor 組件，并在其中編寫以下代碼：

ToDoList.razor

  1. @page "/todos" 
  2. @using BlazorEventHandlingDemo.Data 
  3.   
  4. <div class="row"> 
  5.     <div class="col"><h3>To Do List</h3></div> 
  6.     <div class="col"><h5 class="float-right">Total Minutes: @TotalMinutes</h5></div> 
  7. </div> 
  8.   
  9. <br /> 
  10. <table class="table"> 
  11.     <tr> 
  12.         <th>Title</th> 
  13.         <th>Minutes</th> 
  14.         <th></th> 
  15.     </tr> 
  16.     @foreach (var todo in ToDos) 
  17.     { 
  18.         <ToDoItem Item="todo" /> 
  19.     } 
  20. </table> 
  21.   
  22. @code { 
  23.   
  24.     public List<ToDo> ToDos { get; set; } 
  25.     public int TotalMinutes { get; set; } 
  26.   
  27.     protected override void OnInitialized() 
  28.     { 
  29.         ToDos = new List<ToDo>() 
  30.         { 
  31.                 new ToDo() { Title = "Analysis", Minutes = 40 }, 
  32.                 new ToDo() { Title = "Design", Minutes = 30 }, 
  33.                 new ToDo() { Title = "Implementation", Minutes = 75 }, 
  34.                 new ToDo() { Title = "Testing", Minutes = 40 } 
  35.         }; 
  36.   
  37.         UpdateTotalMinutes(); 
  38.     } 
  39.   
  40.     public void UpdateTotalMinutes() 
  41.     { 
  42.         TotalMinutes = ToDos.Sum(x => x.Minutes); 
  43.     } 
  44. } 

在上面的 @code 代碼塊中，我們聲明了兩個(gè)屬性 ToDos 和 TotalMinutes。其中 ToDos 屬性存儲(chǔ)待辦事項(xiàng)的列表，TotalMinutes 存儲(chǔ)所有待辦事項(xiàng)花費(fèi)分鐘數(shù)的總和。

  1. public List<ToDo> ToDos { get; set; } 
  2. public int TotalMinutes { get; set; } 

接下來，我們在 Blazor 組件生命周期方法之一的名為 OnInitialized 的方法中使用一些待辦事項(xiàng)對象來初始化我們的 ToDos 列表。我們還調(diào)用了 UpdateTotalMinutes 方法，該方法簡單地計(jì)算 ToDos 列表中所有 ToDo 對象的 Minutes 屬性的總和。

  1. protected override void OnInitialized() 
  2. { 
  3.     ToDos = new List<ToDo>() 
  4.     { 
  5.             new ToDo() { Title = "Analysis", Minutes = 40 }, 
  6.             new ToDo() { Title = "Design", Minutes = 30 }, 
  7.             new ToDo() { Title = "Implementation", Minutes = 75 }, 
  8.             new ToDo() { Title = "Testing", Minutes = 40 } 
  9.     }; 
  10.   
  11.     UpdateTotalMinutes(); 
  12. } 

HTML 代碼也非常簡單，我們將 TotalMinutes 屬性顯示在帶有頁面標(biāo)題的頁面頂部。

  1. <h5 class="float-right">Total Minutes: @TotalMinutes</h5> 

我們還在頁面上生成了一個(gè) HTML 表格，接下來的 foreach 循環(huán)遍歷 ToDos 列表并渲染一個(gè)名為 ToDoItem 的子組件，我們還使用其 Item 屬性將每個(gè) ToDo 對象傳入子組件中。

  1. @foreach (var todo in ToDos) 
  2. { 
  3.     <ToDoItem Item="todo" /> 
  4. } 

讓我們在 Shared 文件夾中創(chuàng)建一個(gè)子組件 ToDoItem.razor 并在其中添加以下代碼。該子組件有一個(gè) Item 屬性(我們在父組件的 foreach 循環(huán)中設(shè)置了屬性)。該子組件簡單地使用 元素生成一個(gè)表格行，并在表格單元格中顯示 Title 和 Minutes 屬性。

  1. @using BlazorEventHandlingDemo.Data 
  2. <tr> 
  3.     <td>@Item.Title</td> 
  4.     <td>@Item.Minutes</td> 
  5.     <td> 
  6.        <button type="button" class="btn btn-success btn-sm float-right"> 
  7.             + Add Minutes 
  8.         </button> 
  9.     </td> 
  10. </tr> 
  11.   
  12. @code { 
  13.     [Parameter] 
  14.     public ToDo Item { get; set; } 
  15. } 

運(yùn)行該應(yīng)用程序，您會(huì)看到一個(gè)類似于如下內(nèi)容的頁面：

如果此時(shí)您點(diǎn)擊子組件中的 Add Minutes 按鈕，則不會(huì)有任何反應(yīng)，因?yàn)槲覀冞€沒有將 click 事件與 Add Minutes 按鈕關(guān)聯(lián)起來。讓我們更新一下 Add Minutes 按鈕的代碼，添加調(diào)用 AddMinute 方法的 @onclick 特性。

  1. <button type="button" class="btn btn-success btn-sm float-right" @onclick="AddMinute"> 
  2.     + Add Minutes 
  3. </button> 

當(dāng)用戶每次點(diǎn)擊 Add Minutes 按鈕時(shí)，事件處理方法 AddMinute 簡單地將 Minutes 屬性加 1。

  1. public async Task AddMinute(MouseEventArgs e) 
  2. { 
  3.     Item.Minutes += 1;  
  4. } 

再次運(yùn)行應(yīng)用程序并嘗試點(diǎn)擊每個(gè)待辦事項(xiàng)的 Add Minutes 按鈕。您將注意到每個(gè)待辦事項(xiàng)顯示的分鐘數(shù)會(huì)增加，但是頂部的總分鐘數(shù)屬性將保持不變。這是由于 TotalMinutes 屬性是在父組件中計(jì)算的，而父組件并不知道子組件中的 Minutes 屬性增加了。

讓我們使用上面提到的步驟在我們的示例中改進(jìn)一下子組件到父組件的通信，以便每次增加子組件中的 Minutes 時(shí)，能夠相應(yīng)地更新父組件的 UI。

步驟1：在子組件中聲明一個(gè) EventCallback 或 EventCallback<T> 委托

第一步是在我們的子組件中聲明 EventCallback 委托。我們聲明一個(gè)委托 OnMinutesAdded，并使用 MouseEventArgs 作為 T，因?yàn)樗梢詾槲覀兲峁┯嘘P(guān)按鈕點(diǎn)擊事件的額外信息。

  1. [Parameter] 
  2. public EventCallback<MouseEventArgs> OnMinutesAdded { get; set; } 

步驟2：在父組件中附加一個(gè)到子組件的 EventCallback 或 EventCallback 的回調(diào)方法

在這一步中，我們需要向在前面的步驟 1 中聲明的子組件的 EventCallback 委托 OnMinutesAdded 附加一個(gè)回調(diào)方法。

  1. <ToDoItem Item="todo" OnMinutesAdded="OnMinutesAddedHandler" /> 

在本例中我們使用的回調(diào)方法是 OnMinutesAddedHandler，該方法簡單地調(diào)用同一個(gè) UpdateTotalMinutes 方法，更新 TotalMinutes 屬性。

  1. public void OnMinutesAddedHandler(MouseEventArgs e) 
  2. { 
  3.     UpdateTotalMinutes(); 
  4. } 

步驟3：當(dāng)子組件需要與父組件通信時(shí)，使用 InvokeAsync(Object) 或 InvokeAsync(T) 方法調(diào)用父組件的回調(diào)方法。

在這一步中，我們需要調(diào)用父組件中的回調(diào)方法，因?yàn)槲覀兿Ｍ看斡脩酎c(diǎn)擊 Add Minute 按鈕時(shí)都會(huì)更新父組件 UI，所以最好的調(diào)用位置是在 AddMinute 方法中。

  1. public async Task AddMinute(MouseEventArgs e) 
  2. { 
  3.     Item.Minutes += 1; 
  4.     await OnMinutesAdded.InvokeAsync(e); 
  5. } 

這就是在 Blazor 中實(shí)現(xiàn)從子組件到父組件通信我們所要做的所有事情。以下是子組件 ToDoItem.razor 的完整代碼：

ToDoItem.razor

  1. @using BlazorEventHandlingDemo.Data 
  2. <tr> 
  3.     <td>@Item.Title</td> 
  4.     <td>@Item.Minutes</td> 
  5.     <td> 
  6.         <button type="button" class="btn btn-success btn-sm float-right" @onclick="AddMinute"> 
  7.             + Add Minutes 
  8.         </button> 
  9.     </td> 
  10. </tr> 
  11.   
  12. @code { 
  13.   
  14.   [Parameter] 
  15.   public ToDo Item { get; set; } 
  16.   
  17.   [Parameter] 
  18.   public EventCallback<MouseEventArgs> OnMinutesAdded { get; set; } 
  19.   
  20.   public async Task AddMinute(MouseEventArgs e) 
  21.   { 
  22.     Item.Minutes += 1; 
  23.     await OnMinutesAdded.InvokeAsync(e); 
  24.   } 
  25. } 

以下是父組件 ToDoList.razor 的完整代碼：

ToDoList.razor

  1. @page "/todos" 
  2. @using BlazorEventHandlingDemo.Data 
  3.   
  4. <div class="row"> 
  5.     <div class="col"><h3>To Do List</h3></div> 
  6.     <div class="col"><h5 class="float-right">Total Minutes: @TotalCount</h5></div> 
  7. </div> 
  8.   
  9. <br /> 
  10. <table class="table"> 
  11.     <tr> 
  12.         <th>Title</th> 
  13.         <th>Minutes</th> 
  14.         <th></th> 
  15.     </tr> 
  16.     @foreach (var todo in ToDos) 
  17.     { 
  18.         <ToDoItem Item="todo" OnMinutesAdded="OnMinutesAddedHandler" /> 
  19.     } 
  20. </table> 
  21.   
  22. @code { 
  23.   
  24.     public List<ToDo> ToDos { get; set; } 
  25.     public int TotalCount { get; set; } 
  26.   
  27.     protected override void OnInitialized() 
  28.     { 
  29.         ToDos = new List<ToDo>() 
  30.         { 
  31.                 new ToDo() { Title = "Analysis", Minutes = 40 }, 
  32.                 new ToDo() { Title = "Design", Minutes = 30 }, 
  33.                 new ToDo() { Title = "Implementation", Minutes = 75 }, 
  34.                 new ToDo() { Title = "Testing", Minutes = 40 } 
  35.         }; 
  36.   
  37.         UpdateTotalMinutes(); 
  38.     } 
  39.   
  40.     public void UpdateTotalMinutes() 
  41.     { 
  42.         TotalCount = ToDos.Sum(x => x.Minutes); 
  43.     } 
  44.   
  45.     public void OnMinutesAddedHandler(MouseEventArgs e) 
  46.     { 
  47.         UpdateTotalMinutes(); 
  48.     } 
  49. } 

在瀏覽器中運(yùn)行應(yīng)用程序，并嘗試增加任一待辦事項(xiàng)的分鐘數(shù)，您會(huì)注意到父組件將自動(dòng)地實(shí)時(shí)更新總分鐘數(shù)。

翻譯自 Waqas Anwar 2021年3月28日的文章 《Communication between Blazor Components using EventCallback》 [1]

 

責(zé)任編輯：武曉燕 來源： 技術(shù)譯站
BlazorEventCallback通信
相關(guān)推薦

2016-09-14 21:44:50

JavascriptreactJsjsx

2015-03-13 15:50:39

靜態(tài)路由網(wǎng)段協(xié)議

2021-07-12 10:36:36

Blazor組件入門

2021-07-05 11:06:11

組件React通信

2021-08-30 14:23:05

BlazorHTTP請求

2021-08-24 14:57:27

鴻蒙HarmonyOS應(yīng)用

2024-01-09 08:34:56

Vue3.js組件通信

2010-07-30 13:52:17

Flex組件

2011-03-10 09:07:47

liferayportlet

2012-12-24 14:40:54

iosjs

2021-11-08 07:48:50

管道流通信數(shù)據(jù)

2023-11-13 09:28:20

跨組件組件化

2009-02-03 09:49:00

FTP空間共享

2010-11-16 11:40:04

Oracle查詢表空間

2011-08-31 13:22:37

PhoneGapAndroidjavascript

2021-02-14 21:05:05

通信消息系統(tǒng)

2020-03-24 12:40:57

Linux命令行通信

2017-07-11 18:00:21

vue.js數(shù)據(jù)組件

2023-05-05 16:32:50

SveltosKubernetes集群

2010-01-11 11:06:23

三層交換機(jī)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號