时间戳

首页 > 解决方案 > Blazor 绑定值：事件 oninput

c# - Blazor 绑定值：事件 oninput

问题描述

我正在尝试通过使用来触发 Blazor 中的模型验证EditForm。

出于某种原因，oninput如果使用 ，似乎不会调用该事件InputText，但它使用简单input元素即可。

我错过了什么吗？

这是一个 HTML 示例：

<EditForm Model="@Model" OnValidSubmit="@OnValidSubmit" id="authorize">
    <h1 class="mb-3">
       <span class="d-block">Authorize</span>
    </h1>
    <DataAnnotationsValidator />
    <div class="form-group">
        <label class="sr-only" for="AuthorizeUsername">Username</label>
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <div class="input-group-text"><i class="fas fa-user"></i></div>
            </div>
            <InputText type="text" class="form-control" id="AuthorizeUsername" placeholder="Username" @bind-value="@Model.Username" @bind-value:event="oninput" />
        </div>
    </div>
    <div class="form-group">
        <label class="sr-only" for="AuthorizePassword">Password</label>
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <div class="input-group-text"><i class="fas fa-asterisk"></i></div>
            </div>
            <InputText type="password" class="form-control" id="AuthorizePassword" placeholder="Password" @bind-value="@Model.Password" @bind-value:event="oninput" />
        </div>
    </div>
    <div class="form-group">
        <ValidationSummary />
        <button type="submit" class="btn btn-outline-primary"><i class="fas fa-sign-in-alt mr-1"></i> Login</button>
    </div>
</EditForm>

标签： c#blazor

解决方案

如果您需要此验证，请参阅此答案：

如何制作使用 oninput 而不是 onchange 绑定的 EditForm 输入

原始答案

TLDR：Blazor 输入组件不支持此功能。您需要通过扩展 InputBase 来滚动您自己的内容，并且您的新组件的 Razor 标记会将输入事件绑定直接放在输入元素上。

如果这是一个开箱即用的选项，那就太好了，但至少有一种方法可以做到这一点并不可怕。请注意，对于更复杂的输入类型，这很快就会变得更加复杂。例如，如果您想要自己的InputBase<DateTime>派生类，则需要准备好正确处理绑定事件中的 DateTime 格式。

您自己版本的InputText, 让我们称它为MyInputTextCodeextends的标记InputBase<string>看起来完全像这样：

@inherits MyInputTextCode;

<input type="text" id="@Id" class="@Class" @bind-value="CurrentValueAsString" @bind-value:event="oninput" />

MyInputTextCode你的实现的类名在哪里InputBase<string>

用法本质上与 .razor 标记相同InputText，但您将使用 .razor 标记的文件名（不带扩展名）而不是InputText.

更新 4-30-2020 我不再建议在代码隐藏中从 InputBase 派生，而是您可以简单地@inherits使用现有的表单组件类，例如 InputText 并覆盖 .razor 文件中的标记。如果不清楚，请对此答案发表评论，我将在此更新中进一步详细说明。

推荐阅读