在 Blazor 上按输入键更改变量值

Posted 2023-04-12

【中文标题】在 Blazor 上按输入键更改变量值

【英文标题】：Change variable value on input key press on Blazor

【发布时间】：2020-02-01 23:17:36

【问题描述】：

我想要做的是在用户按键时更新变量值，但它只更新输入模糊时的值。

以下代码不起作用。

<p>@increment</p>
<input 
    type="text"
    @onchange="@((ChangeEventArgs e) =>
        increment = e.Value.ToString())"
/>

@code 
    string increment;

使用@bind 和@bind-value 也不起作用。

我用这个例子做了一个blazorfiddle。

当按下 a 键时，我可以让谁更改变量的值？

【问题讨论】：

使用input 事件而不是change 事件。

@Dai 那会怎样？

【参考方案1】：

答案：

引用Data Binding docs：

<input @bind="CurrentValue" 
       @bind:event="oninput" />

与onchange 在元素失去焦点时触发不同，oninput 在文本框的值更改时触发。

使用@oninput：

不用@bind指令也可以实现：

<input value="@CurrentValue"
       @oninput="(e)=> CurrentValue = e.Value.ToString()"/>

InputText & oninput

对于在InputText 组件上寻找oninput 的人，答案已完整记录在InputText based on the input event 文档中：

使用 InputText 组件创建一个使用输入事件而不是更改事件的自定义组件。 Shared/CustomInputText.razor:

@inherits InputText

<input @attributes="AdditionalAttributes" class="@CssClass" 
    @bind="CurrentValueAsString" @bind:event="oninput" />

CustomInputText 组件可以在任何使用InputText 的地方使用：

<CustomInputText @bind-Value="exampleModel.Name" />

【讨论】：

如果您不使用组件，表单验证将停止工作，例如InputText。如果我继续验证，我似乎要么失去验证，要么失去更新绑定的能力。

@TheMuffinMan，完整记录了如何InputText based on the input event 我相应地更新了答案。抱歉耽搁了，我今天看到了你的评论。

【参考方案2】：

如果有人想使用提供的InputText 表单组件执行此操作，请创建您自己的组件文件，例如InputTextOnInput.razor：

@inherits InputText

<input @attributes="AdditionalAttributes" class="@CssClass" 
   @bind="CurrentValueAsString" @bind:event="oninput" />

然后像这样在你的表单中使用它：

<InputTextOnInput @bind-Value="@PropertyToUpdate " />

@code 
    private string PropertyToUpdate  get; set; 

更多详情请关注Blazor docs

【参考方案3】：

在 .NET 5 Blazor 中，@oninput 似乎可以直接在 InputText 上正常工作：

<InputText @oninput="(e) => StringProp = e.Value.ToString()"></InputText>

因此，谢天谢地，在没有自定义组件的情况下，也可以在表单被触摸时立即启用表单上的提交按钮。例如：

<InputText @oninput="() => untouched = false"></InputText>
...
<button type="submit" disabled="@untouched">Submit</button>