2

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

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

4

2 回答 2

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 事件处理程序，你必须在去外太空之前拦截提交动作并自己取消它。

于 2021-03-12T17:15:04.113 回答
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");
}
于 2021-03-12T17:05:06.310 回答