Blazor 菜单项的可重复事件回调

Question

我正在开发一个可重复的“卡片”组件，其中包含菜单项列表和此菜单可以执行的操作。 但是我无法使该功能正常工作。 我来自 React，这样的事情很常见，但无法将我的想法转换为 Blazor。 帮助表示赞赏。

父组件：

<Card Title="TestTitle" MenuActions=@MenuActions />

@code{

    public Dictionary<string, EventCallback> MenuActions = 
          new Dictionary<string, EventCallback>(){
            {"Test Case", HandleTestCase},
    }
    public void HandleTestCase(){
        Console.WriteLine("Test Case");
    }
}

子组件：

<div>
<h2>@Title</h2>
<ul>
   @foreach(var(menuTitle, menuAction) in MenuActions) {
   <li>
      <button onclick=@(menuAction.Invoke())>
         @menuTitle
      </button> 
   </li>
   }
</div>

@code{

[Parameter]
public string Title {get; set;}

[Parameter]
public Dictionary<string, EventCallback> MenuActions {get; set;}

}

完全迷路了，现在刚刚收到这个错误：

error CS1503: Argument 2: cannot convert from 'method group' to 'EventCallback'

Answer 1

首先是关于该主题的一些好的文档：

• 成分
• ASP.NET 内核 Blazor 事件处理
• ASP.NET 核心 Blazor 数据绑定

在您的孩子中，您似乎没有使用 Blazor 方式来调用事件，而是使用 HTML 语法，该语法将直接在前端调用 JS 代码，而忽略了 Z98AD8B3C99B3CA16F1F7FA84EE64C44Z。

  <button onclick=@(menuAction.Invoke())>
     @menuTitle
  </button> 

注意： @onclick vs onclick mabye 试试：

  <button @onclick=MyMethod>
     @menuTitle
  </button> 
@code {
    void MyMethod() {
    //Invoke stuff here
    }
}

如果您想使用 JS-Interop，请阅读此.

Ofc 你可以像纯 HTML 一样将任何 JS 代码加载到浏览器中，也可以编写纯 HTML 来执行它，但是你在技术上完全避开了 Blazor，如下所示：

onclick="console.log('Hello')"