onclick - Blazor组件中的OnClick和@onclick有什么区别

Question

我发现了一些奇怪的东西，我想知道是否有人知道答案:

首先这不是这个问题: Different method calls in Blazor 该问题涉及 HTML 元素。我说的是组件。

所以我有自己的组件，名为 MyButton；并且它指定了 OnClick 参数:

MyButton.razor

<button @onclick="OnClick">Do Something</button>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClick { get; set; }
}

当我使用 MyButton 时，我可以完全使用名称，即

<MyButton OnClick="SomeMethod" />

但这也有效:

<MyButton @onclick="SomeMethod" />

当我从 MyButton.razor 中删除整个 @code block 时，它们都给我完全相同的错误消息:

<Mybutton OnClick="MyMethod" />

Object of type 'MyButton' does not have a property matching the name 'OnClick'.

<Mybutton @onclick="MyMethod" />

Object of type 'MyButton' does not have a property matching the name 'onclick'.

唯一的区别在于大写字母； “OnClick”与“onclick”......这是合乎逻辑的。所以看起来 @onclick 与 OnClick 相同...但它们是一样的吗？

这仅仅是某种重载吗？

Answer 1

@onclick是原生 HTML 点击事件，OnClick是您在 MyButton 中显式公开的事件参数组件。

所以在这种情况下你应该使用

<MyButton OnClick="SomeMethod" />

我试图用 @onclick 重现用法但它对我不起作用。

对于科学，您可以尝试添加文本 <p>Like this</p>给你的MyButton组件并查看是否 @onclick事件仍然有效，如果它仅在您单击按钮或单击文本时触发。

另请参阅 Microsoft Docs获取详细信息。