Blazor WASM子组件Input绑定失效问题排查

我基于.NET 9开发Blazor WASM独立版应用的自定义自动完成组件，原本直接使用<input @bind="UserInputText" @bind:event="oninput" @bind:after="OnUserInputChanged" />可实现输入框与string变量绑定，且每次输入后触发处理方法，功能正常。但封装为AutoComplete子组件后，@bind:after能正常触发处理方法，但输入框与UserInputText的绑定失效。

父组件代码 #

...
<AutoComplete UserInputText="UserInput" UserInputTextChangedHandler="OnUserInputChanged" />
...
@code {
   private string? UserInput = "";
   private void OnUserInputChanged() { /* 处理输入生成建议 */ }
}

AutoComplete子组件代码 #

@typeparam TItem
<div>
   <input @bind="UserInputText" @bind:event="oninput" @bind:after="UserInputTextChangedHandler" />
</div>
@code {
   [Parameter] public string? UserInputText { get; set; }
   [Parameter] public Action UserInputTextChangedHandler { get; set; }
   [Parameter] public List<TItem> Suggestions { get; set; }
}

另外，尝试用EventCallback替代Action传递处理方法时，出现错误：Argument 1: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback' to 'System.Action'。

问题原因及解决方案 #

1. 输入框与UserInputText绑定失效的原因及解决 #

Blazor组件参数是单向传递的，子组件无法直接修改父组件传入的参数值。你在子组件中用@bind="UserInputText"时，输入框更新的只是子组件内部的UserInputText参数副本，并没有通知父组件同步更新，导致父组件的UserInput和子组件输入框值不同步，看起来像是绑定失效。

要实现双向绑定，需遵循Blazor的双向绑定约定：

• 子组件定义参数UserInputText
• 同时定义对应的UserInputTextChanged回调（类型为EventCallback<string>）
• 通过中间变量处理输入值的更新，并触发回调通知父组件

修改后的子组件代码：

@typeparam TItem
<div>
   <input @bind="CurrentValue" @bind:event="oninput" @bind:after="HandleInputChanged" />
</div>
@code {
   [Parameter] public string? UserInputText { get; set; }
   // 替换Action为EventCallback<string>，用于传递更新后的值
   [Parameter] public EventCallback<string> UserInputTextChanged { get; set; }
   [Parameter] public List<TItem> Suggestions { get; set; }

   // 中间变量处理输入值
   private string? CurrentValue
   {
       get => UserInputText;
       set
       {
           if (UserInputText != value)
           {
               UserInputText = value;
               // 触发回调，将新值传递给父组件
               _ = UserInputTextChanged.InvokeAsync(value);
           }
       }
   }

   private void HandleInputChanged()
   {
       // 这里可以添加输入后的额外逻辑，比如本地过滤建议列表
       // 如果需要父组件处理，也可以让父组件在参数更新后执行逻辑
   }
}

父组件可直接使用双向绑定语法，简化代码：

...
<AutoComplete @bind-UserInputText="UserInput" />
...
@code {
   private string? UserInput = "";

   // 在UserInput的setter中处理输入逻辑
   private string? _userInput = "";
   private string? UserInput
   {
       get => _userInput;
       set
       {
           _userInput = value;
           OnUserInputChanged();
       }
   }

   private void OnUserInputChanged() { /* 处理输入生成建议 */ }
}

2. EventCallback报错的原因及解决 #

你之前的错误是因为类型不匹配：子组件定义的是Action类型的参数，但你尝试传递EventCallback类型的值，导致转换失败。

正确的做法是：

• 子组件将回调参数改为EventCallback<string>（而非Action）
• 父组件传递的方法需接受string类型参数（或用lambda表达式适配）

父组件也可以显式传递回调方法：

...
<AutoComplete UserInputText="UserInput" UserInputTextChanged="OnUserInputChanged" />
...
@code {
   private string? UserInput = "";

   // 方法需接收更新后的输入值
   private void OnUserInputChanged(string newValue)
   {
       UserInput = newValue;
       /* 处理输入生成建议 */
   }
}

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