Blazor 將 EventCallback 作為類屬性傳遞給組件

Question

我正在嘗試在 Blazor 中開發一個組件，我希望它從 C# 類中獲取其所有功能（文本、EventCallbacks 等）。 像這樣的東西：

Blazor 組件（代碼隱藏）：

public partial class Card : ComponentBase
{
    [Parameter] public CardData CardData { get; set; }

    protected async Task OnActionFiredEvent(EventCallback<object> eventCallback, object itemId)
    {
        if (eventCallback.HasDelegate)
            await CardData.CardTitleOnClickAction.InvokeAsync(itemId);
    }
}

Blazor 組件（剃刀）：

<!-- Card image -->
<div class="view view-cascade overlay">
    <a>
        <div class="mask rgba-white-slight waves-effect waves-light"></div>
    </a>
</div>

<!-- Card content -->
<div class="card-body card-body-cascade text-center">

    <!-- Title -->
    <h4 class="card-title">
        <a class="waves-effect waves-light" @onclick="@(() => OnActionFiredEvent(CardData.CardTitleOnClickAction, CardData.CardItemId))">
            <strong>@CardData.CardTitle</strong>
        </a>
    </h4>
    <!-- Subtitle -->
    @if (!string.IsNullOrEmpty(CardData.CardSubTitle))
    {
        <h6 class="font-weight-bold indigo-text py-2">@CardData.CardSubTitle</h6>
    }

    <!-- Text -->
    @if (!string.IsNullOrEmpty(CardData.CardText))
    {
        <p class="card-text">
            @CardData.CardText
        </p>
    }
</div>

<!-- Card footer -->
<div class="card-footer text-muted text-center">
    @CardData.CardFooter
</div>

CarData 類：

public class CardData
{
    public object CardItemId { get; set; }
    public string CardTitle { get; set; }
    public string CardSubTitle { get; set; }
    public string CardText { get; set; }
    public string CardFooter { get; set; }
    public EventCallback<object> CardTitleOnClickAction { get; set; }
}

用：

<Card CardData="@(new CardData() {
CardTitle = "TextTitle",
CardTitleOnClickAction = EventCallBackMethod,
CardSubTitle = "TextSubTitle",
CardText = "Text"})" />

問題是我在將 EventCallBack 作為類屬性傳遞時收到以下錯誤：無法將方法組“EventCallBackMethod”轉換為非委托類型“EventCallback”。 您是否打算調用該方法？

失敗的方法本身是這樣的：

protected async Task EventCallBackMethod()
    {
        await DoSomething();
    }

知道如何解決這個問題嗎？

Answer 1

正如布賴恩·帕克 (Brian Parker) 所提到的，您的回調中需要有一個類型。 例如，如果您不想傳遞值，則可以傳遞null ；

MyComponent.razor

<button @onclick="OnButtonClicked">Click me</button>

@code{
    [Parameter]
    public EventCallback ButtonClicked{ get; set; }


    protected async Task OnButtonClicked()
    {
        await ButtonClicked.InvokeAsync(null);
    }
}

例如作為剃刀組件，按鈕點擊觸發OnButtonClicked ，然后調用ButtonClicked參數，該參數可以在父頁面中引用。

Page.razor

@page "/pagename"

<MyComponent ButtonClicked="@ButtonClickedHandler" />

@code{
    protected void ButtonClickedHandler()
    {
        Logger.LogInfo("Button click was handled on the page");
    }
}

---

如果你想傳遞參數，你可以這樣做：

MyNextComponent.razor

<button @onclick="OnButtonClicked">Click me</button>

@code{
    [Parameter]
    public EventCallback<bool> ButtonClicked{ get; set; }

    protected async Task OnButtonClicked(bool value)
    {
        await ButtonClicked.InvokeAsync(true);
    }
}

Page.razor @page "/pagename"

<MyNextComponent ButtonClicked="@ButtonClickedHandler" />

@code{
    protected void ButtonClickedHandler(bool value)
    {
        Logger.LogInfo($"Button click was handled on the page: {value}");
    }
}

Answer 2

像這樣創建您的 EventCallback

    private async Task Press1()
    {
        this.message = "F1";
    }

EventCallback evt1 = EventCallback.Factory.Create(this, Press1);

財產

public class CardData
{
    public EventCallback<object> CardTitleOnClickAction { get; set; }
    public static EventCallback GetEvent(CardData data)
    {
        return data.CardTitleOnClickAction;
    }
}

成分

@onclick="() =>Modal.CardData.GetEvent(data).InvokeAsync()"