如何使EditForm输入使用oninput而不是onchange进行绑定 [英] How to make an EditForm Input that binds using oninput rather than onchange
问题描述
假设我要使用EditForm，但我希望每次用户在控件中键入值时触发值绑定，而不是仅在模糊时触发.举例来说，假设我想要一个做到这一点的InputNumber?我尝试使用不同的方式浮动，例如bind-Value:event ="oninput"，但没有成功.通过复制用于InputNumber的AspNetCore源代码并覆盖/重写一些东西，我终于能够或多或少地获得我想要的东西.这是我的InputNumber，可以实现我所希望的:
Suppose I want to use an EditForm, but I want the value binding to trigger every time the user types into the control instead of just on blur. Suppose, for the sake of an example, that I want an InputNumber that does this? I've tried using different means that are floating around such as bind-Value:event="oninput" with no success. I was finally able to get more or less what I wanted by copying the AspNetCore source code for InputNumber and overriding / rewriting a few things. Here is my InputNumber which accomplishes what I'm hoping for:
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;
}
}
请注意，序列6项中的"oninput"已从基本InputNumber的BuildRenderTree方法中的"onchange"更改为.我想知道如何a)查看BuildRenderTree的输出，以便我可以知道如何使用Razor和/或b)一般而言，知道哪种剃刀语法等效于执行此操作未来.我从AspNetCore代码中的注释中收集到，这绝对不是执行此操作的首选方法，而Razor是首选方法.我已经通过订阅EditContext的OnFieldChangedEvent来测试了在.NET Core 3 Preview 7 Asp.net Core托管Blazor中的工作原理，并且可以看到通过这种方法，我得到了我正在寻找的不同行为.希望有更好的方法.
note the "oninput" in the sequence 6 item was changed from "onchange" in the base InputNumber's BuildRenderTree method. I'd like to know how to a) see the output of BuildRenderTree, so that I can know how to do this with Razor and/or b) just kind of know in general what sort of razor syntax would be equivalent to doing this in the future. I've gathered from comments in the AspNetCore code that this is definitely not the preferred way of doing this sort of thing, with Razor being the preferred approach. I've tested that this works in .NET Core 3 Preview 7 Asp.net Core Hosted Blazor by subscribing to the EditContext's OnFieldChangedEvent, and can see that with this approach I get the different behavior that I'm looking for. Hopefully there is a better way.
更新:包括有关该问题的更多信息
Update: Including some more information about the problem
@using BlazorAugust2019.Client.Components;
@inherits BlazorFormsCode
@page "/blazorforms"
<EditForm EditContext="EditContext">
<div class="form-group row">
<label for="date" class="col-sm-2 col-form-label text-sm-right">Date: </label>
<div class="col-sm-4">
<KlaInputDate Id="date" Class="form-control" @bind-Value="Model.Date"></KlaInputDate>
</div>
</div>
<div class="form-group row">
<label for="summary" class="col-sm-2 col-form-label text-sm-right">Summary: </label>
<div class="col-sm-4">
<KlaInputText Id="summary" Class="form-control" @bind-Value="Model.Summary"></KlaInputText>
</div>
</div>
<div class="form-group row">
<label for="temperaturec" class="col-sm-2 col-form-label text-sm-right">Temperature °C</label>
<div class="col-sm-4">
<KlaInputNumber Id="temperaturec" Class="form-control" @bind-Value="Model.TemperatureC"></KlaInputNumber>
</div>
</div>
<div class="form-group row">
<label for="temperaturef" class="col-sm-2 col-form-label text-sm-right">Temperature °F</label>
<div class="col-sm-4">
<input type="text" id="temperaturef" class="form-control" value="@Model.TemperatureF" readonly />
</div>
</div>
</EditForm>
using BlazorAugust2019.Shared;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using System;
namespace BlazorAugust2019.Client.Pages.BlazorForms
{
public class BlazorFormsCode : ComponentBase
{
public EditContext EditContext;
public WeatherForecast Model;
public BlazorFormsCode()
{
Model = new WeatherForecast()
{
Date = DateTime.Now,
Summary = "Test",
TemperatureC = 21
};
EditContext = new EditContext(Model);
EditContext.OnFieldChanged += EditContext_OnFieldChanged;
}
private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
{
Console.WriteLine($"EditContext_OnFieldChanged - {e.FieldIdentifier.FieldName}");
}
}
}
我要寻找的是当我在输入中键入内容时触发的"EditContext_OnFieldChanged"事件.当前示例有效，只是在寻找更好的方法.
What I'm looking for is the "EditContext_OnFieldChanged" event to fire when I type into the inputs. The current example works, just looking for a better way.
推荐答案
对于任何想知道的人，都可以将InputText子类化以更改其呈现方式.例如，要使其使用oninput事件，请创建包含以下内容的MyInputText.razor:
For anyone wondering, you can subclass InputText to change how it renders. For example, to make it use the oninput event, create MyInputText.razor containing:
@inherits Microsoft.AspNetCore.Components.Forms.InputText
<input @attributes="@AdditionalAttributes" class="@CssClass" @bind="@CurrentValueAsString" @bind:event="oninput" />
现在，当您使用<MyInputText @bind-Value="@someval" />时，它的行为就像InputText一样，只是它会在每次击键时更新.
Now when you use <MyInputText @bind-Value="@someval" /> it will behave just like InputText except it updates on each keystroke.
SteveSanderson
SteveSanderson
这篇关于如何使EditForm输入使用oninput而不是onchange进行绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
