標簽：nta switch tco ima 移動 idt tar data-bind 常見
翻译自 Waqas Anwar 2021年3月25日的文章 《A Developer’s Guide To Blazor Event Handling》 [1]
如果您正在开发交互式 Web 应用程序，根据不同的应用程序事件和用户操作动态更新用户界面是十分常見的做法。这些操作会触发事件，而作为开发人员，我们的工作是使用一些事件处理技术来处理这些事件。Blazor 内置支持处理多种事件，比如 onclick、onchange 和 onmousemove 等，并为开发者提供了处理这些事件的多种方式。我将在本教程中概述 Blazor 事件处理。此外，我还将介绍如何在 Blazor 中使用事件参数和 Lambda 表达式，以及如何将附加参数传递给事件處理程序。
Blazor 中处理事件的基本语法如下所示：
@on[DOM EVENT]="[DELEGATE]"
在上面的語法中
假設您要處理按鈕單擊事件，您可以按如下方式使用上述語法：
<button @onclick="Update" />
让我们通过一些实际的例子来更詳細地介绍一下事件处理。 在 Visual Studio 2019 中创建一个新的 Blazor Server 应用程序，然后添加一个新的 Blazor 组件 Calculator.razor。
@page "/calculator"
<h3>Calculator</h3>
<div class="form-group">
<label for="number1">Number 1</label>
<input type="number" class="form-control" id="number1" @bind="number1">
</div>
<div class="form-group">
<label for="number2">Number 2</label>
<input type="number" class="form-control" id="number2" @bind="number2">
</div>
<div class="form-group">
<label><b>Total: </b>@total</label>
</div>
<button class="btn btn-primary" @onclick="Calculate">Calculate</button>
<button class="btn btn-secondary" @onclick="Clear">Clear</button>
@code {
private int number1 = 0;
private int number2 = 0;
private int total = 0;
private void Calculate()
{
total = number1 + number2;
}
private void Clear()
{
number1 = 0;
number2 = 0;
total = 0;
}
}
上面的组件中有两个按钮：Calculate 和 Clear，它们都处理了 onclick 事件，並調用了上面的 @code 代碼塊中編寫的 Calculate 和 Clear 方法。
<button class="btn btn-primary" @onclick="Calculate">Calculate</button>
<button class="btn btn-secondary" @onclick="Clear">Clear</button>
如果您運行這個簡單的示例，將看到類似于以下內容的頁面。在文本框中輸入一些數字，然後按下按鈕查看事件處理的效果。
如下面的代码片段所示，Blazor 还支持异步委托事件處理程序。这些处理程序類型会返回一个 Task，在其內部我們可以使用 await 關鍵字調用異步方法。
private async Task Clear()
{
await Task.Delay(10);
number1 = 0;
number2 = 0;
total = 0;
}
大部分 Blazor 事件支持事件参数，这些参数是携带触发事件的相关信息的对象。例如，KeyboardEventArgs 可以为我们提供用户按下的按键的詳細信息。
让我们创建一个带有标准的 HTML div 元素的基本組件，如下所示。
@page "/mouseevents"
<h3>Mouse Events</h3>
<div style="width: 400px; height: 400px; background: lightblue" @onmousemove="Move"></div>
<label><b>Coordinates: </b>@coordinates</label>
@code {
private string coordinates = "";
private void Move(MouseEventArgs e)
{
coordinates = $"{e.ScreenX}:{e.ScreenY}";
}
}
上面的 div 元素處理 onmousemove 事件並將 MouseEventArgs 傳遞給方法名爲 Move 的事件處理程序。然后，Move 事件處理程序使用 MouseEventArgs 類中提供的 ScreenX 和 ScreenY 属性，用鼠标的 X 和 Y 位置更新本地字段 coordinates。运行应用程序，并尝试在 div 中移動鼠标，您将看到坐标会实时更新。
Blazor 支持大量的 EventArgs 对象，但最常用的 EventArgs 如下表所示：
| 事件 | 類 | DOM 事件 |
|---|---|---|
| 焦點(Focus) | FocusEventArgs | onfocus, onblur, onfocusin, onfocusout |
| 輸入(Input) | ChangeEventArgs | onchange, oninput |
| 鍵盤(Keyboard) | KeyboardEventArgs | onkeydown, onkeypress, onkeyup |
| 鼠標(Mouse) | MouseEventArgs | onclick, oncontextmenu, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout |
| 鼠标滚轮(Mouse wheel) | WheelEventArgs | onwheel, onmousewheel |
| 觸控(Touch) | TouchEventArgs | ontouchstart, ontouchend, ontouchmove, ontouchenter, ontouchleave, ontouchcancel |
您可以在微软 Blazor 文檔頁面[2]上看到 EventArgs 的完整列表。
Blazor 还支持将 Lambda 表达式作为委托事件處理程序。您应当只在简单的用例中使用这些表达式，如果有很多的代码要执行，应避免使用 Lambda 表达式。让我们修改一下前面的 Calculator 示例，这次使用 Lambda 表达式替代上面的 Calculate 和 Clear 方法。
@page "/calculator"
<h3>Calculator</h3>
<div class="form-group">
<label for="number1">Number 1</label>
<input type="number" class="form-control" id="number1" @bind="number1">
</div>
<div class="form-group">
<label for="number2">Number 2</label>
<input type="number" class="form-control" id="number2" @bind="number2">
</div>
<div class="form-group">
<label><b>Total: </b>@total</label>
</div>
<button class="btn btn-primary" @onclick="@(e => total = number1 + number2)">Calculate</button>
<button class="btn btn-secondary" @onclick="@(e => total = number1 = number2 = 0)">Clear</button>
@code {
private int number1 = 0;
private int number2 = 0;
private int total = 0;
}
有时，我们希望根据每个应用程序的需要向事件處理程序传递额外的参数。例如，在一个循环中，您可能希望将循环迭代索引号传递给事件参数，以便您知道此事件處理程序是针对循环中的哪一项执行的。另一个简单的例子是，从两个或多个控件调用相同的事件處理程序，并传递控件的引用以处理事件。让我们用一个基础的例子来介绍一下这个概念。依照下面的代码片段再次修改 Calculator 的代碼。
<div class="form-group">
<label for="number1">Number 1</label>
<input type="number" class="form-control" id="number1" @bind="number1">
</div>
<div class="form-group">
<label for="number2">Number 2</label>
<input type="number" class="form-control" id="number2" @bind="number2">
</div>
<div class="form-group">
<label><b>Total: </b>@total</label>
</div>
<button class="btn btn-primary" @onclick="@(e => Calculate(e, 1))">Add</button>
<button class="btn btn-primary" @onclick="@(e => Calculate(e, 2))">Subtract</button>
<button class="btn btn-secondary" @onclick="Clear">Clear</button>
@code {
private int number1 = 0;
private int number2 = 0;
private int total = 0;
private void Calculate(MouseEventArgs e, int buttonType)
{
switch (buttonType)
{
case 1:
total = number1 + number2;
break;
case 2:
total = number1 - number2;
break;
}
}
private void Clear()
{
number1 = 0;
number2 = 0;
total = 0;
}
}
在上面代碼片段中，重要的兩行如下，我將一個附加參數傳遞給了 Calculate 方法，其值分別爲 1 和 2：
<button class="btn btn-primary" @onclick="@(e => Calculate(e, 1))">Add</button>
<button class="btn btn-primary" @onclick="@(e => Calculate(e, 2))">Subtract</button>
方法 Calculate 的代碼也略有修改，因爲現在它接受一個額外的參數 buttonType。在此方法中，我們根據 buttonType 參數的值進行加法或減法運算。
private void Calculate(MouseEventArgs e, int buttonType)
{
switch (buttonType)
{
case 1:
total = number1 + number2;
break
case 2:
total = number1 - number2;
break;
}
}
再次運行應用程序，並嘗試點擊 Add 和 Subtract 方法，您會看到相同的 Calculate 方法給了我們不同的結果。
相關閱讀：
作者 ： Waqas Anwar
翻译 ： 技術譯站
链接 ： 英文原文
標簽：nta switch tco ima 移動 idt tar data-bind 常見
原文地址：https://www.cnblogs.com/ittranslator/p/a-developers-guide-to-blazor-event-handling.html
