使用Blazor EditForm上的自定义提交按钮

Question

我创建了一个自定义按钮组件，它禁用自己并在繁忙时显示繁忙微调器：

bool IsBusy;
async Task HandleClickAsync()
{
if (IsBusy) return;
IsBusy = true;
try
{
await OnClick.InvokeAsync();
}
finally
{
IsBusy = false;
}
}

在html中查询IsBusy值以添加适当的Css类来禁用和显示微调器。这样可以在处理时防止重复事件。此按钮将用于API调用，包括获取数据和表单提交。

实现从API检索数据的梦想。

问题是，当我将其用作表单上的"提交"按钮时，处理单击的是EditForm OnValidSubmit事件，而不是我的HandleClickAsync((处理程序。

所以，我想我想要的是能够将按钮放置在EditForm中，而不是分配一种类型的"；提交"；，然后捕获单击并手动调用父EditForm上的OnValidSubmit事件。

我能做这个吗？

Answer 1

我采用的方法是：

• 删除"；OnValidSubmit"；来自EditForm
• 添加一个"；OnValidSubmit"；自定义命令按钮的事件

然后在自定义命令中使用

[CascadingParameter] public EditContext EditContext { get; set; }
[Parameter] public EventCallback OnValidSubmit { get; set; }
async Task HandleClickAsync()
{
if (EditContext.Validate())
{
await OnValidSubmit.InvokeAsync();
}
}

然后从按钮而不是EditForm处理OnValidSubmit事件。似乎有效，但很高兴听到任何更智能的解决方案(不确定是否有任何使用这种方法的gotchas(。