时间戳

首页 > 解决方案 > 如何在 Blazor WASM 中使用 @bind-Value 计算字符 InputTextArea

blazor - 如何在 Blazor WASM 中使用 @bind-Value 计算字符 InputTextArea

问题描述

我有这个基本组件：

public TicketDetail AddedTicketDetail { get; set; } = new TicketDetail();

我在剃刀文件中使用它，如下所示：

<div class="col-sm-12">
                    <InputTextArea @bind-Value="AddedTicketDetail.Description" @bind-Value:event="oninput" class="form-control" />
                    <span class="attachment-label">Characters: @AddedTicketDetail.Description.Length</span>
                    <ValidationMessage For="@(() => AddedTicketDetail.Description)" />
                </div>

但这还不包括字符。一旦我离开文本区域，它就会直接进入我的验证。有没有一种方法可以使用 InputTextArea 和 @bind-Value 来获取字符数，而无需仅使用textarea简单的 @bind？

标签： blazor

解决方案

您不能强制“内置”InputTextArea或InputText绑定在oninput. 但是你可以继承InputTextArea：

@inherits InputTextArea

<textarea @attributes="AdditionalAttributes"
       class="@CssClass"
       value="@CurrentValue"
       @oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />

（来源）

然后在您的代码中使用它而不使用@bind-Value:event="oninput"

<div class="col-sm-12">
 <InputTextAreaOnInput @bind-Value="AddedTicketDetail.Description"  class="form-control" />
 <span class="attachment-label">Characters: @AddedTicketDetail.Description.Length</span>
 <ValidationMessage For="@(() => AddedTicketDetail.Description)" />
</div>

推荐阅读