问题描述
我创建了一个新的、干净的 Blazor WASM 项目,并在索引页面底部添加了以下最小示例:
<EditForm Model="FormModel" OnSubmit="OnSubmit">
<InputText @bind-Value="FormModel" />
<button type="submit">Submit</button>
</EditForm>
@code {
public string FormModel { get; set; } = "";
public async Task OnSubmit(EditContext context) => Console.WriteLine("Clicked");
}
当我聚焦文本框时,写一些东西然后点击提交按钮什么也没有发生。只有在第二次单击时,消息才会出现在控制台中。
这看起来像一个 blazor 错误,但有很多关于这个问题的票,结果总是发现实际上是用户代码中的错误。但是,我发现的所有解决方案或原因都不适用于这种最小情况。
有什么我遗漏的吗?我会 - 显然 - 喜欢按钮不要忽略第一次点击。
解决方法
我找到了解决该问题的方法,用另一个对象包装模型似乎可以解决问题:
<EditForm Model="Model" OnSubmit="OnSubmit">
<InputText @bind-Value="Model.Value" />
<button type="submit">
<div>Submit</div>
</button>
</EditForm>
@code {
public class FormModel {
public string Value { get; set; }
}
public FormModel Model { get; set; } = new FormModel();
public async Task OnSubmit(EditContext context) => Console.WriteLine("Clicked");
}
,
这个问题总是被证明是用户代码中的错误
没错...
您在这里所做的一方面是将您的 EditForm(模型属性)绑定到一个字符串属性,并将 InputText 组件绑定到完全相同的属性。 Model 参数应该是对象类型,而 InputText 组件的 Value 属性是字符串,它最初包含值 null,您可能已经注意到,因为编译器期望提供 EditForm 的 Model 参数或 EditForm 的 EditContext 参数,而不是无效的。因此,您无辜地为 FormModel 属性分配了一个空字符串值,从而安抚了编译器,但您的代码仍然格式错误,并且需要为此付出代价...
答案
每当您单击“提交”按钮时,都会调用 OnSubmit 事件处理程序,您需要自己处理提交,而您不这样做。由于“提交”按钮嵌入在表单中,一旦您单击按钮,就会执行提交操作,并将表单发布到外层空间……执行流程不再在 Blazor SPA 中。表单数据提交到外太空返回后,第二次提交调用Console.WriteLine("Clicked");
注意,如果使用 OnValidSumit 事件,Blazor JSInterop 会拦截提交操作并取消它。 Blazor 中不存在表单提交的概念。所有 Blazor 应用程序都发生在一个糟糕的页面上;这是SPA空间。同样,如果您使用 OnSubmit 事件处理程序,则必须在前往外太空之前拦截提交操作并自行取消。