I'm trying to create custom Input in Blazor 8 Server. This is what im doing:
@inject HttpClient HttpClient@inject IConfiguration Configuration<InputText hidden @bind-Value=Value id="recaptcha-token" /><div class="g-recaptcha" data-sitekey="site key"></div><script>const input = document.getElementById('recaptcha-token');input.value = "";function onRecaptchaSuccess(token) {const input = document.getElementById('recaptcha-token');input.value = token;}</script><script src="https://www.google.com/recaptcha/api.js? onload=onloadCallback&render=explicit" async defer></script><script>var onloadCallback = function () {grecaptcha.render(document.querySelector('.g-recaptcha'), {sitekey: 'site key',callback: onRecaptchaSuccess});};</script>@code {[SupplyParameterFromForm]private string Value { get; set; }public async Task<bool> Validate(){ Console.WriteLine(Value); if (Value == string.Empty) { Value = string.Empty; return false; } var values = new Dictionary<string, string> { { "secret", "secret" }, { "response", Value } }; var content = new FormUrlEncodedContent(values); var response = await HttpClient.PostAsync("https://www.google.com/recaptcha/api/siteverify", content); var responseString = await response.Content.ReadAsStringAsync(); if (!responseString.Contains("true")) { return false; } Value = string.Empty; return true;}This is my custom component. I want to two way bind Values property into
<EditForm></EditForm>But when I make my property a [Parameter], I'm getting this error:
ArgumentException: The renderer does not have a component with ID 28.
This is what I added to my custom component:
[Parameter] public string Value { get; set; }[Parameter] public EventCallback<string> ValueChanged { get; set; }And this is how I use it:
<GoogleRecaptcha @ref="googleRecaptcha" @bind-Value="recaptchaToken"></GoogleRecaptcha>If anyone has any ideas - let me know. Maybe I didn't understand something fundamental, how the Blazor works, how it bind these values. This is in page without any interactivity. This kind of wrapper will be also usable when you want to have consistency and don't want to write the same code multiple times in certain situations.