Blazor 绑定值：事件 oninput

Question

我正在尝试使用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>

Answer 1

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

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

原答案

TLDR：Blazor 输入组件不支持开箱即用。您需要通过扩展 InputBase 来推出自己的产品，新组件的 Razor 标记会将输入事件绑定直接放在输入元素上。

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

您自己版本的标记InputText，让我们称之为MyInputTextCodeextendsInputBase<string>看起来完全像这样：

@inherits MyInputTextCode;

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

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

用法基本上与 相同InputText，但您可以使用 .razor 标记的文件名（没有扩展名）而不是InputText.

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

Answer 2

它适用于简单的输入，因为您绑定到 html 属性“value”。

InputText 是一个 C# 类。您需要绑定的属性名称是Value大写的 V。

将所有@bind-value出现的情况更改为@bind-Value，它应该可以工作。