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

Question

假设我想使用 an EditForm，但我希望每次用户在控件中键入时触发值绑定，而不是仅在模糊时触发。

举个例子，假设我想要一个InputNumber<int>能做到这一点的东西？我尝试过使用不同的方法，但bind-Value:event="oninput"没有成功。InputNumber通过复制 AspNetCore 源代码并覆盖/重写一些东西，我终于能够或多或少地获得我想要的东西。

这是我的InputNumber<int>，它实现了我所希望的：

    public class MyInputNumber: InputNumber<int>

    {

        protected override void BuildRenderTree(RenderTreeBuilder builder)

        {

            builder.OpenElement(0, "input");

            builder.AddAttribute(1, "step", "any");

            builder.AddMultipleAttributes(2, AdditionalAttributes);

            builder.AddAttribute(3, "type", "number");

            builder.AddAttribute(4, "class", CssClass);

            builder.AddAttribute(5, "value", FormatValue(CurrentValueAsString));

            builder.AddAttribute(6, "oninput", EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));

            builder.CloseElement();

        }

        // Copied from AspNetCore - src/Components/Components/src/BindConverter.cs

        private static string FormatValue(string value, CultureInfo culture = null) => FormatStringValueCore(value, culture);

        // Copied from AspNetCore - src/Components/Components/src/BindConverter.cs

        private static string FormatStringValueCore(string value, CultureInfo culture)

        {

            return value;

        }

    }

oninput请注意，序列 6 项中的“ ”是从基础方法onchange中的“”更改而来的。我想知道如何：InputNumberBuildRenderTree

1. 查看 的输出BuildRenderTree，以便我知道如何使用 Razor 和/或

2. 只是大致知道什么样的 Razor 语法相当于将来执行此操作。

我从 AspNetCore 代码中的注释中了解到，这绝对不是执行此类操作的首选方法，而 Razor 是首选方法。EditContext我已经通过订阅的 来测试这在 .NET Core 3 Preview 7 ASP.NET Core Hosted Blazor 中是否有效，OnFieldChangedEvent并且可以看到，通过这种方法，我获得了我正在寻找的不同行为。希望有更好的方法。

Answer 1

对于任何想知道的人，您可以子类化InputText以更改其呈现方式。例如，要使其使用该oninput事件，请创建包含以下内容的MyInputText.razor：@inherits&nbsp;Microsoft.AspNetCore.Components.Forms.InputText <input&nbsp;@attributes="@AdditionalAttributes"&nbsp;class="@CssClass"&nbsp;@bind="@CurrentValueAsString"&nbsp;@bind:event="oninput"&nbsp;/>现在，当您使用<MyInputText @bind-Value="@someval" />它时，它的行为就像InputText除了它在每次击键时更新之外。

Answer 2

.NET Core 3.1 的官方文档input现在介绍了从组件继承并更改它以使其响应事件：基于输入事件的InputText使用InputText组件创建一个使用input事件而不是change事件的自定义组件。使用以下标记创建一个组件，并按原样使用该组件InputText：剃刀：@inherits InputText <input     @attributes="AdditionalAttributes"      class="@CssClass"      value="@CurrentValue"      @oninput="EventCallback.Factory.CreateBinder<string>(         this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />该文档还给出了如何继承通用组件的示例：@using System.Globalization @typeparam TValue @inherits InputBase<TValue>因此，如果您将这两个组合在一起，您可以创建一个更改InputNumber组件行为的组件，如下所示：@typeparam TNumber @inherits InputNumber<TNumber> <input     type="number"    step="any"    @attributes="AdditionalAttributes"     class="@CssClass"     value="@CurrentValue"     @oninput="EventCallback.Factory.CreateBinder<string>(         this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />包含该type="number"部分将提供与现有部分相同的行为InputNumber（仅允许数字字符输入，使用向上和向下箭头递增/递减等）如果将上面的代码放入 Blazor 项目的 Shared 文件夹中名为 InputNumberUpdateOnInput.razor 的文件中，则可以像使用普通 一样使用该组件，例如InputNumber：<InputNumberUpdateOnInput class="form-control text-right" @bind-Value="@invoiceLine.Qty" />如果您想控制组件允许的小数位数，您需要将该step值作为传递给组件的参数。

Answer 3

尝试这个：&nbsp;<input&nbsp;type="text"&nbsp;id="example1"&nbsp;@bind-value="@value"&nbsp;@bind-value:event="oninput"&nbsp;/>更多的...不推荐您的方法。您应该使用 Razor 对组件进行子类化。以下是应该有效的示例。它可以指导您如何获得解决方案。包装的解决方案InputText：新输入文本.razor<div&nbsp;class="form-group"> &nbsp;&nbsp;&nbsp;&nbsp;<label&nbsp;class="col-form-label">@Label</label> &nbsp;&nbsp;&nbsp;&nbsp;<InputText&nbsp;Class="form-control"&nbsp;Value="@Value"&nbsp;ValueChanged="@ValueChanged"&nbsp;ValueExpression="@ValueExpression"></InputText> </div> @functions&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;[Parameter]&nbsp;string&nbsp;Label&nbsp;{&nbsp;get;&nbsp;set;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;[Parameter]&nbsp;string&nbsp;Value&nbsp;{&nbsp;get;&nbsp;set;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;[Parameter]&nbsp;EventCallback<string>&nbsp;ValueChanged&nbsp;{&nbsp;get;&nbsp;set;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;[Parameter]&nbsp;Expression<Func<string>>&nbsp;ValueExpression&nbsp;{&nbsp;get;&nbsp;set;&nbsp;} }索引剃刀<span>Name&nbsp;of&nbsp;the&nbsp;category:&nbsp;@category.Name</span> <EditForm&nbsp;Model="@category"> &nbsp;&nbsp;&nbsp;&nbsp;<NewInputText&nbsp;@bind-Value="@category.Name"/> </EditForm>InputBase您也可以像这样直接继承：&nbsp;@inherits&nbsp;InputBase<string> &nbsp;<input&nbsp;type="number"&nbsp;bind="@CurrentValue"&nbsp;id="@Id"&nbsp;class="@CssClass"&nbsp;/>希望这可以帮助...

Answer 4

我发现如果他/她避免使用@bind而是手动绑定，就可以做到这一点，如下所示：<InputText Value=@MyValue @oninput=@HandleInputChange ValueExpression=@(() => MyValue) />@{&nbsp; // This will change for every character which is entered/removed from the input&nbsp; Public string MyValue { get; set; }&nbsp; void HandleInputChange(ChangeEventArgs args)&nbsp; {&nbsp; &nbsp; MyValue = args.Value.ToString();&nbsp; }}我仍然不太明白为什么这有效。我认为这是因为参数AdditionalAttributes。它将oninput属性传递给更新您的值的 html<input>元素，因此您不再依赖回调ValueChanged来更新您的值。

Answer 5

好吧，在浏览源代码（特别是查看属性 CurrentValueAsString 和 CurrentValue）后，我已经弄清楚了这一点。这是我提出的用于制作文本输入的解决方案，该文本输入可以在输入上正确触发字段更改事件：&nbsp; &nbsp; public class InputTextCode : InputBase<string>&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result = value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; validationErrorMessage = null;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }@inherits InputTextCode;<input type="text" id="@Id" class="@Class" @bind-value="CurrentValueAsString" @bind-value:event="oninput" />如果这可以是开箱即用的输入组件上的一个易于配置的选项，那就太好了，但至少有一种方法可以做到这一点，不会让我起鸡皮疙瘩。

Answer 6

InputNumber如果你想保留默认事件，我通常会这样解决onchange：<p>    <InputNumber @bind-Value="myValue" @oninput="@(e => Int32.TryParse(e.Value.ToString(), out myValue))" /></p><p>    myValue: @myValue</p>@code {    private int myValue = 0;}可空整数：<p>    <InputNumber @bind-Value="myValue" @oninput="@(e => myValue = int.TryParse(e.Value.ToString(), out int tmp) ? (int?)tmp : null)" /></p><p>    myValue: @myValue</p>@code {    private int? myValue = 0;}如果你想保留InputText默认onchange事件但仍然做出反应，oninput我通常会这样做：@oninput="@(e => <bind-value variable> = e.Value.ToString())"例如：<InputText @bind-value="@Model.Username" @oninput="@(e => Model.Username = e.Value.ToString())" />如果您希望使用oninput事件而不是事件，那么这里是来自https://learn.microsoft.com/onchange的 .NET 7的完整示例：示例模型.cs：using System.ComponentModel.DataAnnotations;public class ExampleModel{    [Required]    [StringLength(10, ErrorMessage = "Name is too long.")]    public string? Name { get; set; }}共享/自定义输入文本.razor：@inherits InputText<input @attributes="AdditionalAttributes"        class="@CssClass"        @bind="CurrentValueAsString"        @bind:event="oninput" />页面/FormExample7.razor：@page "/form-example-7"@using Microsoft.Extensions.Logging@inject ILogger<FormExample7> Logger<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">    <DataAnnotationsValidator />    <ValidationSummary />    <CustomInputText @bind-Value="exampleModel.Name" />    <button type="submit">Submit</button></EditForm><p>    CurrentValue: @exampleModel.Name</p>@code {    private ExampleModel exampleModel = new();    private void HandleValidSubmit()    {        Logger.LogInformation("HandleValidSubmit called");        // Process the valid form    }}