Blazor自定义InputBox组件双向绑定失效问题求助

问题原因 #

Blazor的双向绑定依赖参数+回调的核心模式：子组件不仅需要接收值的Value参数，还必须定义对应的ValueChanged回调参数，才能将子组件的输入变化通知给父组件更新状态。你的原组件缺少ValueChanged回调，导致父组件无法感知子组件的输入变更。

解决步骤及代码修改 #

1. 更新InputBox组件的后台代码（InputBox.razor.cs）

添加ValueChanged回调参数，类型为EventCallback<string>：

public partial class InputBox
{
    [Parameter]
    public string Value { get; set; }
    
    // 新增双向绑定必需的回调参数
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
    
    [Parameter]
    public string PlaceHolder { get; set; } = string.Empty;
}

2. 更新InputBox组件的前端代码（InputBox.razor）

有两种写法实现输入值同步：

• 写法一（推荐，简洁）：使用Blazor内置的@bind-Value语法，自动关联参数和回调

<div class="InputBox">
    <input title="@PlaceHolder" placeholder="@PlaceHolder" type="text" 
           @bind-Value="Value" @bind-Value:event="oninput"/>
</div>

注：@bind-Value:event="oninput"会让值在用户输入时实时同步，默认是onchange（失去焦点时同步）

• 写法二（手动处理事件）：直接监听输入事件并调用回调

<div class="InputBox">
    <input title="@PlaceHolder" placeholder="@PlaceHolder" type="text" 
           value="@Value" 
           @oninput="async (e) => await ValueChanged.InvokeAsync(e.Value.ToString())"/>
</div>

3. 修改父组件的使用方式

将Value=@username改为Blazor双向绑定的标准语法@bind-Value="@username"：

<InputBox @bind-Value="@username" />

<button @onclick="SaveUserName">保存</button>

@code {
    public string username { get; set; } = "test user";

    public void SaveUserName() 
    {
        Console.WriteLine(username); // 现在会输出用户输入的最新内容
    }
}

关键说明 #

• EventCallback<T>是Blazor官方规定的子组件通知父组件更新状态的回调类型，它会自动处理组件渲染和状态同步逻辑
• @bind-Value语法本质是Value参数和ValueChanged回调的语法糖，简化了双向绑定的代码编写

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