Question

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

以下代码不起作用。

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

@code {
    string increment;
}

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

我用示例制作了一个blazorfiddle。

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

Answer 1

引用Data Binding文档：

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

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

Answer 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 的更多详细信息

Answer 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>

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

3 个答案: