Blazor 8 Server自定义Input组件双向绑定异常求助

问题原因 #

你遇到的ArgumentException: The renderer does not have a component with ID 28错误，核心原因有三点：

• 违反单向数据流规则：Blazor中[Parameter]属性由父组件管控，子组件不能直接修改Parameter值，你之前直接给Value赋值的操作会打乱组件渲染状态，引发上下文异常。
• JS与Blazor状态不同步：原代码通过JS直接修改DOM元素值，Blazor Server的组件状态在服务器端维护，这种操作不会同步到组件实例，且组件重新渲染后DOM引用可能失效，导致回调时找不到对应组件。
• 未适配EditForm规范：自定义输入组件未集成Blazor的InputBase<T>基类或EditContext，无法和EditForm的双向绑定机制兼容。

解决方案 #

1. 改用InputBase基类重构组件 #

继承InputBase<string>可自动获得双向绑定、EditContext集成等能力，避免手动处理参数带来的问题：

@inject HttpClient HttpClient
@inject IConfiguration Configuration
@inherits InputBase<string>

<div class="g-recaptcha" id="@CaptchaId"></div>

@code {
    private string CaptchaId = $"recaptcha-{Guid.NewGuid()}";

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            // 初始化reCAPTCHA，传递组件引用给JS
            JSRuntime.InvokeVoidAsync("renderRecaptcha", CaptchaId, Configuration["Recaptcha:SiteKey"], DotNetObjectReference.Create(this));
        }
        base.OnAfterRender(firstRender);
    }

    [JSInvokable]
    public void OnRecaptchaSuccess(string token)
    {
        // 通过CurrentValue更新值，自动触发父组件的ValueChanged
        CurrentValue = token;
    }

    public async Task<bool> ValidateCaptcha()
    {
        if (string.IsNullOrEmpty(CurrentValue))
            return false;

        var values = new Dictionary<string, string>
        {
            { "secret", Configuration["Recaptcha:SecretKey"] },
            { "response", CurrentValue }
        };

        var content = new FormUrlEncodedContent(values);
        var response = await HttpClient.PostAsync("https://www.google.com/recaptcha/api/siteverify", content);
        var responseData = await response.Content.ReadFromJsonAsync<RecaptchaResponse>();

        // 清空token防止重复提交
        CurrentValue = string.Empty;
        return responseData?.Success ?? false;
    }

    // 强类型解析reCAPTCHA响应
    private class RecaptchaResponse
    {
        public bool Success { get; set; }
        public List<string> ErrorCodes { get; set; }
    }

    // InputBase要求实现的解析方法
    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
    {
        result = value;
        validationErrorMessage = null;
        return true;
    }
}

2. 重构JS交互逻辑 #

在wwwroot/js目录下创建recaptcha.js，通过DotNetObjectReference调用组件方法，确保上下文有效：

window.renderRecaptcha = function (captchaId, siteKey, dotNetRef) {
    grecaptcha.render(captchaId, {
        sitekey: siteKey,
        callback: function (token) {
            // 调用Blazor组件的方法传递token
            dotNetRef.invokeMethodAsync('OnRecaptchaSuccess', token);
        }
    });
}

在布局文件（如_Layout.cshtml）中引入JS资源：

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
<script src="~/js/recaptcha.js"></script>

3. 组件使用方式 #

和EditForm配合使用时，直接通过@bind-Value绑定即可：

<EditForm Model="@FormModel" OnValidSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <GoogleRecaptcha @ref="_recaptcha" />

    <button type="submit">提交表单</button>
</EditForm>

@code {
    private MyFormModel FormModel = new MyFormModel();
    private GoogleRecaptcha _recaptcha;

    private async Task HandleSubmit()
    {
        // 验证reCAPTCHA
        var captchaValid = await _recaptcha.ValidateCaptcha();
        if (!captchaValid)
        {
            // 处理验证失败逻辑
            return;
        }

        // 执行表单提交逻辑
    }

    public class MyFormModel
    {
        // 其他表单字段
    }
}

关键优化点说明 #

• 单向数据流合规：通过CurrentValue更新值，InputBase会自动触发ValueChanged回调通知父组件，符合Blazor的数据流规则。
• JS交互安全：使用DotNetObjectReference保证JS回调时组件实例有效，避免找不到组件ID的错误。
• 唯一DOM ID：通过Guid.NewGuid()生成唯一的Captcha容器ID，避免多组件实例冲突。
• 强类型响应解析：用模型解析reCAPTCHA返回值，比字符串匹配更可靠。

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