Blazor：內置@on{EVENT}和自定義EventCallback的區別

Question

如果這個問題看起來很愚蠢，請原諒； 但我對@前綴的使用感到困惑。

當將鼠標懸停在onclick等內置事件上時，Visual Studio 中的 IntelliSense 顯示事件類型（在本例中為onclick ）是Microsoft.AspNetCore.Components.EventCallback並且在組件中實現EventCallback時，該類型顯然又是Microsoft.AspNetCore.Components.EventCallback ；

但是為什么像onclick這樣的內置事件應該以@為前綴，而EventCallback (s) 應該像屬性一樣聲明（沒有@作為前綴）？

Answer 1

如果這個問題看起來很愚蠢，請原諒； 但我對@前綴的使用感到困惑。

一點也不……這是一個非常重要的問題，Blazor 的所有開發人員不僅應該能夠回答，而且應該能夠采取行動。

屬性“@onclick”是一個編譯器指令，指示編譯器創建一個 EventCallback 'delegate'。 EventCallback 是一個存儲對委托的引用的結構； 那是一個方法，它實際上是您分配給屬性“@onclick”的值，例如：

<button type="button" @onclick="ClickMe">Click me</button>

@code
{
     private void ClickMe()
    {
       Console.WriteLine("You clicked me...");
    }
}

如您所見， ClickMe是一種在您單擊按鈕時調用的方法。

您還可以使用不帶 @ 符號的 Html 元素屬性“onclick”。 這當然不是編譯器指令，而是 Html 元素屬性，對吧？ 而且它的值只能是JavaScript function，例如：

<button type="button" onclick="window.ClickMe()">Click me</button>

Now when you click on the button, a JavaScript function, named ClickMe , defined on the window object is called... Note the round parentheses.

當然，有多種方法可以完成上述工作。

在您發布的照片中，Modal 組件有一個名為onOK的屬性，其類型為EventCallback ，因此它的值應該是一個合適的方法ModalOnOK 。 以下代碼片段說明了這一點：

Modal.razor（Modal的定義）

@code{
    [Parameter]
    public EventCallBack onOK {get; set;}
}

如您所見， onOK是一個參數屬性，其類型為EventCallBack 。 因此，在使用 Modal 組件的父組件中，您應該為 property 屬性分配EventCallBack可以封裝的方法的值。

對不起，有很多很多要說的，這只是材料的一小部分。 但是是時候分開了。

希望這可以幫助...