Blazor組件事件處理功能

更新時(shí)間：2022年01月29日 11:12:27 作者：痕跡g

這篇文章介紹了Blazor組件的事件處理功能，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Blazor的組件當(dāng)中, 提供了事件處理功能, 這點(diǎn)類似于使用客戶端(Winform/Wpf)開發(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)绻痪帉懸粋€(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
    }
}

到此這篇關(guān)于Blazor組件事件處理功能的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: