Blazor Server中InputText组件@bind-Value:event="oninput"失效求助

错误原因解析 #

示例1错误原因 #

使用<InputText @bind="customerRecord.CustomerName" @bind:event="oninput" />报错ValueExpression缺失：

• Blazor表单组件（如InputText，继承自InputBase<T>）必须通过@bind-Value明确绑定Value参数，框架才能自动生成ValueExpression（用于表单验证、表达式树解析的核心参数）。
• 简化的@bind语法是为原生HTML元素设计的，用于InputText时无法正确传递ValueExpression，触发框架参数校验错误。

示例2错误原因 #

使用<InputText @bind-Value="customerRecord.CustomerName" @bind-Value:event="oninput" />报错类型转换失败：

• InputText组件的ValueChanged事件默认接收string类型的参数，而oninput事件触发时传递的是ChangeEventArgs对象。
• 直接通过@bind-Value:event修改绑定事件，会导致框架将ChangeEventArgs直接传入ValueChanged，类型不匹配引发转换错误。
• 原生input的@bind:event是框架专门处理的逻辑，会自动提取ChangeEventArgs.Value赋值给绑定属性，而InputText组件未适配这种写法。

解决方案 #

方案1：自定义支持oninput的InputText组件 #

创建自定义组件OnInputText.razor，继承InputText并手动处理oninput事件：

@inherits InputText

<input @attributes="AdditionalAttributes" 
       class="@CssClass" 
       value="@CurrentValue" 
       @oninput="HandleInput" />

@code {
    private void HandleInput(ChangeEventArgs e)
    {
        // 将输入值同步到组件的CurrentValue，自动触发双向绑定更新
        CurrentValueAsString = e.Value?.ToString();
    }
}

使用时和原生InputText完全一致：

<OnInputText @bind-Value="customerRecord.CustomerName" />

方案2：手动绑定事件与值 #

不依赖@bind-Value，手动绑定Value、ValueChanged和oninput事件：

<InputText Value="@customerRecord.CustomerName"
           ValueChanged="@(newValue => customerRecord.CustomerName = newValue)"
           ValueExpression="@(() => customerRecord.CustomerName)">
    <input @attributes="AdditionalAttributes" 
           class="@CssClass" 
           value="@Value" 
           @oninput="(e) => ValueChanged.InvokeAsync(e.Value?.ToString())" />
</InputText>

验证效果 #

使用上述任意方案后，输入内容会实时同步到customerRecord.CustomerName，页面下方的Customer Name显示区域会即时更新，和原生input的效果一致，同时保留InputText组件的表单验证、样式兼容等Blazor表单特性。

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