Blazor：傳遞一個 function ，它將參數傳遞給組件並從中調用它

Question

我正在嘗試將我的 Blazor 服務器項目拆分為組件，以使其更易於管理。

我希望我的組件有一個 function 作為參數傳遞給它。 function 采用字符串參數，當單擊按鈕時，它會以與組件不同的名稱調用。

我嘗試了一些我在網上找到的答案，但它們似乎不起作用（如綁定事件）

代碼

我有一個名為ItemMenu.razor的組件和我的索引頁Index.razor 。

ItemMenu.razor ：

<button @onclick="() => OnClickFunction.Invoke(foo)">foo</button>
<button @onclick="() => OnClickFunction.Invoke(ping)">ping</button>

@code {
    [Parameter] public Action<string> OnClickFunction { get; set; }

    const string foo = "bar";
    const string ping = "pong";
}

Index.razor ：

@page "/"

<h1>This is my index page!</h1>

<ItemMenu OnClickFunction="ShowName" /> @*Error: No overload for 'ShowName' matches delegate 'Action'*@

@code {
    public void ShowName(string myName)
    {
        Console.WriteLine(myName);
    }
}

錯誤

Index.html中的第 3 行引發錯誤No overload for 'ShowName' matches delegate 'Action'

解決方案

原來我只需要將我的變量重命名為OnClick而不是OnClickFunction ...

好的@enet 指出變量名不是問題。 在 blazor 中，我們應該使用 EventCallback 而不是 Action。

原來在我的案例中真正的問題是 Visual Studio，因為我之前在查看其他答案時發現了這個解決方案。 VS 決定在這一行顯示一個錯誤，即使它編譯並運行良好......

Answer 1

注意：問題不在於您在對 Brian 的評論中表達的 function 的命名。 問題是您使用了 Action 委托，但 Action 委托不返回值，或者更確切地說它返回 void。 您可以改用 Func 委托，這樣您就可以調用您的方法並返回一個值。 但是，Blazor 中的正確方法是使用 EventCallback 結構，它會為您生成合適的委托。 它還有其他好處。

ItemMenu.razor

<button @onclick="() => OnClickFunction.InvokeAsync(foo)">foo</button>
    <button @onclick="() => OnClickFunction.InvokeAsync(ping)">ping</button>
    
    @code {
        [Parameter] public EventCallback<string> OnClickFunction { get; set; }
    
        const string foo = "bar";
        const string ping = "pong";
    }

索引.razor

@page "/"

<h1>This is my index page!</h1>

<ItemMenu OnClick="ShowName" /> @*Error: No overload for 'ShowName' matches delegate 'Action'*@

@code {
    public void ShowName(string myName)
    {
        Console.WriteLine(myName);
    }
}

Answer 2

你的裝訂有點短；）

<button @onclick=@(() => OnClick.InvokeAsync("foo"))>foo</button>
<button @onclick=@(() => OnClick.InvokeAsync("ping"))>ping</button>

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

@page "/"

<h1>This is my index page!</h1>

<ItemMenu OnClick="ShowName" /> @*Error: No overload for 'ShowName' matches delegate 'Action'*@

@code {
    public void ShowName(string myName)
    {
        Console.WriteLine(myName);
    }
}