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

【问题标题】：Why Blazor's EditForm requires two clicks on submit button to do anything?为什么 Blazor 的 EditForm 需要两次单击提交按钮才能执行任何操作？
【发布时间】：2021-03-12 13:18:58
【问题描述】：

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

我有什么遗漏吗？我会 - 显然 - 喜欢按钮不忽略第一次点击。

【问题讨论】：

我试过你的代码，它的工作原理是例外
好吧，不适合我，它在 chrome 和 firefox 中对我的工作方式不同，无论是在调试状态下还是在发布状态下。我也更新到最新的 5.0.4 并且问题仍然存在..

标签： blazor blazor-editform

【解决方案1】：

这个问题总是被证明是用户代码中的错误

没错……

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

答案

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

请注意，如果您使用 OnValidSumit 事件，Blazor JSInterop 会拦截提交操作并取消它。 Blazor 中不存在表单提交的概念。所有 Blazor 应用程序都发生在一个可怜的页面上；这是SPA空间。同样，如果你使用 OnSubmit 事件处理程序，你必须在去外太空之前拦截提交动作并自己取消它。

【讨论】：

【解决方案2】：

我找到了解决这个问题的方法，用另一个对象包装模型似乎可以解决问题：

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

【讨论】：