Blazor 将事件回调作为类属性传递给组件

Question

我正在尝试在 Blazor 中开发一个组件，我希望它从 C# 类中获取其所有功能(文本、事件回调等)。 像这样：

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);
}
}

开拓者组件(剃刀)：

<!-- 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>

汽车数据类：

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);
}
}

例如，作为 razor 组件，按钮单击会触发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()"