为什么 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 错误，但有很多关于此问题的票证，它实际上总是用户代码中的错误。但是，none 我发现的解决方案或原因适用于这种最小情况。

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

Answer 1

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

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

Answer 2

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

没错...

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

答案

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

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

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

Why Blazor's EditForm requires two clicks on submit button to do anything?

blazor

blazor-editform

答案