Blazor组件使用EventCallback进行通信

时间：2023-03-17 18:11:37 科技观察

本文转载自微信公众号“技术翻译站”，作者技术翻译敏。转载本文请联系技术翻译站公众号。Blazor应用程序是多个相互交互的Blazor组件的集合，我们可以在其他父组件中使用子组件。在实际应用中，将数据或事件信息从一个组件传递到另一个组件是一种非常常见的场景。您可能有一个页面，其中一个组件中发生的用户操作需要更新其他组件中的某些UI。通常使用EventCallback委托来处理此类通信。在本教程中，我将向您展示如何使用EventCallback在父子组件之间进行通信。以下是使用EventCallback从子组件到父组件进行通信所涉及的一般步骤。在子组件中声明一个EventCallback或EventCallbackdelegate在父组件中为子组件的EventCallback或EventCallback附加一个回调方法当子组件要与父组件通信时，可以调用父组件的回调方法，使用以下方法之一方法。InvokeAsync(Object)-如果您正在使用EventCallbackInvokeAsync(T)-如果您正在使用EventCallback要了解上述步骤，让我们创建一个简单的待办事项列表示例。首先，在Data文件夹中创建以下ToDo.cs类。这是一个简单的类，用于存储每个待办事项的标题和分钟属性。Minutes属性指定完成特定待办事项所需的时间。ToDo.cspublicclassToDo{publicstringTitle{get;set;}publicintMinutes{get;set;}}在项目中添加如下ToDoList.razor组件，并在其中写入如下代码：ToDoList.razor@page"/todos"@usingBlazorEventHandlingDemo。数据

ToDoList

TotalMinutes:@TotalMinutes<

标题分钟@foreach(vartodoinToDos){}@code{publicListToDos{get;set;}publicintTotalMinutes{get;set;}protectedoverridevoidOnInitialized(){ToDos=newList(){newToDo(){Title="分析",Minutes=40},newToDo(){Title="设计",Minutes=30},newToDo(){Title="实施",Minutes=75},newToDo(){标题="测试ing",Minutes=40}};UpdateTotalMinutes();}publicvoidUpdateTotalMinutes(){TotalMinutes=ToDos.Sum(x=>x.Minutes);}}在上面的@code代码块中，我们声明了两个属性ToDos和TotalMinutes其中ToDos属性存储待办事项列表，TotalMinutes存储在所有待办事项上花费的分钟数总和。publicListToDos{get;set;}publicintTotalMinutes{get;set;}接下来，我们住在Blazor组件循环方法之一称为OnInitialized使用一些todo对象来初始化我们的ToDos列表。我们还调用了UpdateTotalMinutes方法，它简单地对ToDos列表中所有ToDo对象的Minutes属性求和。protectedoverridevoidOnInitialized(){ToDos=newList(){newToDo(){Title="分析",Minutes=40},newToDo(){Title="设计",Minutes=30},newToDo(){Title="实施",Minutes=75},newToDo(){Title="Testing",Minutes=40}};UpdateTotalMinutes();}HTML代码也很简单，我们在页面顶部用页面标题显示TotalMinutes属性。TotalMinutes:@TotalMinutes我们还在页面上生成一个HTML表格，接下来的foreach循环遍历ToDos列表并渲染一个名为ToDoItem的子组件，我们也使用它的Item属性来设置每个ToDo对象都被传递到子组件中。@foreach(vartodoinToDos){}让我们在Shared文件夹中创建一个子组件ToDoItem.razor并在其中添加以下代码。这个子组件有一个Item属性（我们在父组件的foreach循环中设置）。该子组件仅使用该元素生成一个表格行，并在表格单元格中显示Title和Minutes属性。@usingBlazorEventHandlingDemo.Data@Item.Title@Item.Minutes+AddMinutes@code{[Parameter]publicToDoItem{get;set;}}运行应用程序，您将看到类似于以下的页面：子组件，没有任何反应，因为我们还没有将点击事件连接到添加分钟按钮。让我们更新AddMinutes按钮的代码以添加调用AddMinute方法的@onclick属性。+AddMinutes当用户每次点击添加分钟按钮时，事件处理方法AddMinute只是简单地添加分钟property1.publicasyncTaskAddMinute(MouseEventArgse){Item.Minutes+=1;}再次运行应用程序并尝试为每个待办事项单击添加分钟按钮。您会注意到每个待办事项显示的分钟数会增加，但顶部的TotalMinutes属性将保持不变。这是因为父组件中计算了TotalMinutes属性，而父组件并不知道子组件中的Minutes属性增加了。让我们使用上述步骤改进我们示例中的子与父通信，这样每次我们在子中增加Minutes时，我们都可以相应地更新父的UI。第1步：在子组件中声明EventCallback或EventCallback委托第一步是在我们的子组件中声明EventCallback委托。我们声明一个委托OnMinutesAdded并将MouseEventArgs用作T，因为它可以为我们提供有关按钮单击事件的额外信息。[Parameter]publicEventCallbackOnMinutesAdded{get;set;}第二步：在父组件中为子组件的EventCallback或EventCallback附加一个回调方法组件的EventCallback委托OnMinutesAdded附加一个回调方法。我们在此示例中使用的回调方法是OnMinutesAddedHandler，它只是调用相同的UpdateTotalMinutes方法，更新TotalMinutes属性。publicvoidOnMinutesAddedHandler(MouseEventArgse){UpdateTotalMinutes();}第三步：当子组件需要与父组件通信时，使用InvokeAsync(Object)或InvokeAsync(T)方法调用父组件的回调方法。在这一步中，我们需要调用父组件中的回调方法，因为我们希望每次用户点击添加分钟按钮时更新父组件UI，所以最好在AddMinute方法中调用。publicasyncTaskAddMinute(MouseEventArgse){Item.Minutes+=1;awaitOnMinutesAdded.InvokeAsync(e);}这就是我们在Blazor中从子项到父项进行通信所要做的全部工作。以下是子组件ToDoItem.razor的完整代码：ToDoItem.razor@usingBlazorEventHandlingDemo.Data@Item.Title@Item.Minutes+AddMinutes@code{[Parameter]publicToDoItem{get;set;}[Parameter]publicEventCallbackOnMinutesAdded{get;set;}publicasyncTaskAddMinute(MouseEventArgse){Item.Minutes+=1;awaitOnMinutesAdded.InvokeAsync(e);}}下面是父组件ToDoList.razor的完整代码：ToDoList.razor@page"/todos"@usingBlazorEventHandlingDemo.Data