自定义Blazor InputText组件字符计数异常问题求助

问题原因 #

1. 字符计数滞后：@bind-Value的更新逻辑是先触发oninput事件，再同步绑定值。你在TextInputEvent中读取的Value是输入前的旧值，导致计数慢一步。
2. 后续输入不触发事件：你的组件仅定义了Value参数，但缺少Blazor双向绑定必需的ValueChanged回调。@bind-Value语法糖依赖Value+ValueChanged的配对才能完成双向同步，缺少回调会导致第一次输入后组件状态无法正常更新，后续事件不再触发。

修复后的代码 #

MyInputText.razor.cs

public partial class MyTextInput
{
    [Parameter]
    [EditorRequired]
    public string Title { get; set; } = string.Empty;

    [Parameter]
    [EditorRequired]
    public string Value { get; set; } = string.Empty;

    // 必须添加双向绑定的回调参数
    [Parameter]
    [EditorRequired]
    public EventCallback<string> ValueChanged { get; set; }

    [Parameter]
    [EditorRequired]
    public int MaxChars { get; set; } = 255;

    // 可选：添加输入长度限制逻辑
    private async Task HandleInput(ChangeEventArgs e)
    {
        var newValue = e.Value?.ToString() ?? string.Empty;
        // 限制输入不超过最大长度
        if (newValue.Length <= MaxChars)
        {
            await ValueChanged.InvokeAsync(newValue);
        }
    }
}

MyInputText.razor

<div class="row">
    <div class="col-md-3">
        <label>@Title</label>
    </div>
    <div class="col-md-8">
        <!-- 手动绑定Value和输入事件，配合长度限制 -->
        <InputText class="form-control" name="textbox" 
                   Value="@Value"
                   @oninput="HandleInput" />
        <ValidationMessage For="() => Value" />
    </div>
    <div class="col-md-1">
        <!-- 直接使用Value.Length获取最新计数，无需额外字段 -->
        <label>@Value.Length / @MaxChars</label>
    </div>
</div>

简化版本（无需手动处理事件） #

如果不需要额外的长度限制逻辑，直接用@bind-Value即可，UI会自动同步最新的字符计数：

MyInputText.razor

<div class="row">
    <div class="col-md-3">
        <label>@Title</label>
    </div>
    <div class="col-md-8">
        <InputText class="form-control" name="textbox" @bind-Value="Value" />
        <ValidationMessage For="() => Value" />
    </div>
    <div class="col-md-1">
        <label>@Value.Length / @MaxChars</label>
    </div>
</div>

对应的cs文件仍需保留ValueChanged参数，确保双向绑定正常工作。

内容的提问来源于stack exchange，提问作者marc_s