Xeretis Posts - Answer Overflow

Xeretis

Explore posts from servers

•Created by Xeretis on 6/5/2024 in #help

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:

<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!

5 replies

Gaming

Programming