Blazor:内置@on{EVENT} 和自定义 EventCallback 之间的区别

Question

如果这个问题看起来很愚蠢，请原谅；但我对 @ 前缀的用法感到困惑。

将鼠标悬停在 onclick 等内置事件上时，Visual Studio 中的 IntelliSense 会显示事件类型(在本例中为 onclick)是 Microsoft。 AspNetCore.Components.EventCallback 并且在组件中实现 EventCallback 时，类型显然又是 Microsoft.AspNetCore.Components.EventCallback;

但是为什么像 onclick 这样的内置事件应该以 @ 为前缀，而 EventCallback(s) 应该像属性一样声明(没有@ 作为前缀)？

Answer 1

Excuse me if this question seems silly; but I have confusion over the usage of @ prefix.

一点也不...这是一个非常重要的问题，Blazor 中的所有开发人员不仅应该能够回答，而且还应该能够采取行动。

属性“@onclick”是指示编译器创建 EventCallback“委托(delegate)”的编译器指令。 EventCallback 是一个存储对委托(delegate)的引用的结构；这是一个方法，它实际上是您分配给属性“@onclick”的值，例如:

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

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

如您所见，ClickMe 是一种在您单击按钮时调用的方法。

您也可以使用不带@ 符号的Html 元素属性“onclick”。这当然不是编译器指令而是 Html 元素属性，对吧？ 并且它的值只能是一个 JavaScript 函数，例如:

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

现在，当您单击该按钮时，将调用在窗口对象上定义的名为 ClickMe 的 JavaScript 函数...请注意圆括号。

当然，有多种方法可以完成上述操作。

在您发布的照片​​中，Modal 组件有一个名为 onOK 的属性，其类型为 EventCallback，因此它的值应该是一个合适的方法，ModalOnOK 。以下代码片段说明了这一点:

Modal.razor(Modal的定义)

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

可以看到onOK是一个类型为EventCallBack的参数属性。因此，在使用 Modal 组件的父组件中，您应该为 property 属性分配 EventCallBack 可以封装的方法的值。

抱歉，要说的很多很多，这只是 Material 的一小部分。但该分开了。

希望这有助于...