Blazor組件的事件處理功能怎么用

本文小編為大家詳細介紹“Blazor組件的事件處理功能怎么用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Blazor組件的事件處理功能怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

Blazor的組件當中, 提供了事件處理功能, 這點類似于使用客戶端(Winform/Wpf)開發, 經常用到的一些類似: 按鈕(Button), 輸入框(TextBox) 用到的一些事件, 例如Click、DoubleClick、TextChanged 等等事件允許我們在后臺代碼當中進行處理相應的邏輯。

介紹事件

在Razor組件中, 同樣提供了事件處理功能。對于具有委托類型值且名為 @on {EVENT}（例如 @onclick）的 HTML 元素特性，Razor 組件將該特性的值視為事件處理程序。

調用lamda表達式

下面的例子中:

Input輸入框,添加了一個文本改變事件, 然后使用@前綴,添加了一個lamda的表達式,輸出一段字符串 "Hello",

對于button而言,添加了一個 onclick事件。

    <input @onchange="@(()=>Console.WriteLine("Hello"))" />
    <button @onclick="@(()=>Console.WriteLine("Hello"))" />

使用code {} 方法

我們同樣,可以在code代碼塊當中, 添加C#的方法, 然后在UI元素當中直接應用到我們的方法名即可。

例: 下面演示了一個button按鈕的onclick事件綁定到c#的方法當中, 當點擊按鈕的事件, 將觸發綁定的c#代碼方法：

    <button @onclick="Show" />
    @code
{
    public void Show()
    {
       //當按鈕被點擊, 將執行下面代碼
    }
}

異步的方法

事件處理同時也支持異步的方法, 返回Task

     public async Task Show()
    {
       //當按鈕被點擊, 將執行下面代碼
    }

事件參數的方法

如果需要在方法當中處理UI當中的一些事件參數, 則可以通過方法添加事件參數即可, 如下所示:

@code{
    public async Task Show(MouseEventArgs  e)
    {
        //...
    }
}

事件參數列表

事件參數的方法(重載)

當同一個UI元素綁定了一個方法, 但是方法具備重載時, 需要我們在UI元素當中明確調用的方法, 否則編譯器無法識別使用哪個方法。

<button @onclick="@(e=>Show(e))" />  //調用帶事件參數的方法
<button @onclick="@(()=>Show())" />  //調用不帶事件參數的方法
@code
{
    //不帶事件參數的方法
    public void Show()
    {

    }

    //帶事件參數的方法
    public void Show(MouseEventArgs e)
    {

    }
}

在默認的情況下, 我們如果只編寫一個事件觸發的方法, 并且明確它是否有參數, 在UI元素綁定方法上, 我們都無需傳遞參數。

    <button @onclick="@Show" />  
@code
{
    public void Show(MouseEventArgs e)
    {
         //當button按鈕被點擊, 會自動將事件參數傳遞給e
    }
}

讀到這里，這篇“Blazor組件的事件處理功能怎么用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。