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

本文小編為大家詳細(xì)介紹“Blazor組件的事件處理功能怎么用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Blazor組件的事件處理功能怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

Blazor的組件當(dāng)中, 提供了事件處理功能, 這點(diǎn)類似于使用客戶端(Winform/Wpf)開(kāi)發(fā), 經(jīng)常用到的一些類似: 按鈕(Button), 輸入框(TextBox) 用到的一些事件, 例如Click、DoubleClick、TextChanged 等等事件允許我們?cè)诤笈_(tái)代碼當(dāng)中進(jìn)行處理相應(yīng)的邏輯。

介紹事件

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

調(diào)用lamda表達(dá)式

下面的例子中:

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

對(duì)于button而言,添加了一個(gè) onclick事件。

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

使用code {} 方法

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

例: 下面演示了一個(gè)button按鈕的onclick事件綁定到c#的方法當(dāng)中, 當(dāng)點(diǎn)擊按鈕的事件, 將觸發(fā)綁定的c#代碼方法：

    <button @onclick="Show" />
    @code
{
    public void Show()
    {
       //當(dāng)按鈕被點(diǎn)擊, 將執(zhí)行下面代碼
    }
}

異步的方法

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

     public async Task Show()
    {
       //當(dāng)按鈕被點(diǎn)擊, 將執(zhí)行下面代碼
    }

事件參數(shù)的方法

如果需要在方法當(dāng)中處理UI當(dāng)中的一些事件參數(shù), 則可以通過(guò)方法添加事件參數(shù)即可, 如下所示:

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

事件參數(shù)列表

事件參數(shù)的方法(重載)

當(dāng)同一個(gè)UI元素綁定了一個(gè)方法, 但是方法具備重載時(shí), 需要我們?cè)赨I元素當(dāng)中明確調(diào)用的方法, 否則編譯器無(wú)法識(shí)別使用哪個(gè)方法。

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

    }

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

    }
}

在默認(rèn)的情況下, 我們?nèi)绻痪帉?xiě)一個(gè)事件觸發(fā)的方法, 并且明確它是否有參數(shù), 在UI元素綁定方法上, 我們都無(wú)需傳遞參數(shù)。

    <button @onclick="@Show" />  
@code
{
    public void Show(MouseEventArgs e)
    {
         //當(dāng)button按鈕被點(diǎn)擊, 會(huì)自動(dòng)將事件參數(shù)傳遞給e
    }
}

讀到這里，這篇“Blazor組件的事件處理功能怎么用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。