blazor - 为什么 Blazor 的 EditForm 需要点击两次提交按钮才能执行任何操作？

Question

我创建了一个新的、干净的 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 错误，但有很多关于此问题的票证，它实际上总是在用户代码中出错。但是，我发现的所有解决方案或原因均不适用于这种最小情况。

有什么我想念的吗？我会 - 显然 - 喜欢按钮不要忽略第一次点击。

Answer 1

this issue it always turned out to be in fact error in user code

没错...

您在这里所做的一方面是将您的 EditForm(模型属性)绑定(bind)到一个字符串属性，并将 InputText 组件绑定(bind)到完全相同的属性。 Model 参数应该是对象类型，而 InputText 组件的 Value 属性是字符串，它最初包含值 null，您可能已经注意到，因为编译器希望提供 EditForm 的 Model 参数或 EditForm 的 EditContext 参数，而不是无效的。因此，您无意地为 FormModel 属性分配了一个空字符串值，从而安抚了编译器，但您的代码仍然是格式错误的，并且为此付出了代价......

答案

每当您单击“提交”按钮时，都会调用 OnSubmit 事件处理程序，您应该自己处理提交，而您并没有这样做。由于“提交”按钮嵌入在表单中，一旦您单击该按钮，就会执行提交操作，并将表单发布到外部空间……执行流程不再在 Blazor SPA 中。表单数据提交到外太空返回后，第二次提交调用Console.WriteLine("Clicked");

请注意，如果您使用 OnValidSumit 事件，Blazor JSInterop 会拦截提交操作并将其取消。 Blazor 中不存在表单提交的概念。所有 Blazor 应用程序都出现在一个糟糕的页面上；这是SPA空间。同样，如果您使用 OnSubmit 事件处理程序，则必须在前往外太空之前拦截提交操作并自行取消。