本文讲解如何在 Blazor 中正确复用自定义组件（如 TextArea），通过 @bind 双向绑定机制实现多个实例间状态隔离，并在父组件中分别获取各自独立的输入值。
本文讲解如何在 blazor 中正确复用自定义组件（如 textarea），通过 `@bind` 双向绑定机制实现多个实例间状态隔离，并在父组件中分别获取各自独立的输入值。
在 Blazor 开发中，经常需要在同一页面多次使用相同的功能性组件（例如多个富文本编辑区、输入框或表单字段）。但若直接重复渲染未设计为可绑定的组件（如原始示例中无参数交互的
），所有实例会共享同一份内部状态（如 result 字段），导致数据互相覆盖，无法区分各实例的用户输入。
要解决这一问题，核心是让子组件支持
可绑定属性（bindable parameter）
——即遵循 Blazor 的双向绑定约定：提供一个 [Parameter] public T Value { get; set; } 和一个对应的 [Parameter] public EventCallback
ValueChanged { get; set; }。这样，父组件可通过 @bind-Value 语法与每个子组件建立独立的数据通道。
以下是改造后的 TextArea.razor 组件完整实现：
@inject IJSRuntime JsRuntime
@inject NavigationManager NavManager
@code {
[Parameter] public required string Value { get; set; }
[Parameter] public required EventCallback ValueChanged { get; set; }
private string result = "";
protected override void OnInitialized()
{
// 初始化时同步外部传入的 Value 到内部 result，确保首次渲染显示正确值
result = Value;
}
private async Task FinishAsync()
{
// 触发回调，将当前 result 值通知父组件
await ValueChanged.InvokeAsync(result);
}
// 当内部 result 变化时（如用户输入），也应同步更新绑定值（可选，但推荐）
private async Task OnResultChanged(string newValue)
{
result = newValue;
await ValueChanged.InvokeAsync(result);
}
}
