Blazor reactive state
Hi, I’m pretty new to blazor and I made a component which I expect to reactively update state. It’s called PinInput and it looks like this:
I’m using this component the following way:
The problem is that I don’t see the state updating and I even get an index out of bounds error at an unspecified place in the component. Can anyone point me in the right direction where I went wrong? Thanks for the help in advance!
<div class="max-w-sm p-6 bg-white border flex items-center flex-col border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<p id="helper-text-explanation" class="…">@Label</p>
<div class="…">
@for (var i = 0; i < Code.Length; i++)
{
<div>
<label for="@($"code-{i + 1}")" class="sr-only">Code @(i + 1)</label>
<input @bind="@Code[i]" type="text" maxlength="1" data-focus-input-init data-focus-input-prev="@($"code-{i}")" data-focus-input-next="@($"code-{i + 2}")" id="@($"code-{i + 1}")" class="…" required/>
</div>
}
</div>
</div>
<script>
…
</script>
@code
{
[Parameter] public string Label { get; set; }
[Parameter] public char?[] Code { get; set; }
[Parameter] public EventCallback<char?[]> CodeChanged { get; set; }
private async Task HandleCodeChanged()
{
await CodeChanged.InvokeAsync(Code);
}
}<div class="max-w-sm p-6 bg-white border flex items-center flex-col border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<p id="helper-text-explanation" class="…">@Label</p>
<div class="…">
@for (var i = 0; i < Code.Length; i++)
{
<div>
<label for="@($"code-{i + 1}")" class="sr-only">Code @(i + 1)</label>
<input @bind="@Code[i]" type="text" maxlength="1" data-focus-input-init data-focus-input-prev="@($"code-{i}")" data-focus-input-next="@($"code-{i + 2}")" id="@($"code-{i + 1}")" class="…" required/>
</div>
}
</div>
</div>
<script>
…
</script>
@code
{
[Parameter] public string Label { get; set; }
[Parameter] public char?[] Code { get; set; }
[Parameter] public EventCallback<char?[]> CodeChanged { get; set; }
private async Task HandleCodeChanged()
{
await CodeChanged.InvokeAsync(Code);
}
}I’m using this component the following way:
<div class="h-screen flex justify-center items-center flex-col">
<h1 class="text-4xl font-extrabold dark:text-white mb-4">Kocka póker</h1>
<PinInput Label="A játék kódja:" @bind-Code="@Code"/>
<div class="mt-2">
<button type="…">Belépés</button>
<button type="…">Új játék</button>
</div>
@{ new string(Code.Where(c => c.HasValue).Select(c => c.Value).ToArray()); }
</div>
@code
{
public char?[] Code { get; set; } = new char?[6];
}<div class="h-screen flex justify-center items-center flex-col">
<h1 class="text-4xl font-extrabold dark:text-white mb-4">Kocka póker</h1>
<PinInput Label="A játék kódja:" @bind-Code="@Code"/>
<div class="mt-2">
<button type="…">Belépés</button>
<button type="…">Új játék</button>
</div>
@{ new string(Code.Where(c => c.HasValue).Select(c => c.Value).ToArray()); }
</div>
@code
{
public char?[] Code { get; set; } = new char?[6];
}The problem is that I don’t see the state updating and I even get an index out of bounds error at an unspecified place in the component. Can anyone point me in the right direction where I went wrong? Thanks for the help in advance!
