Início / coding / Perguntas / 76979736
Accepted
Michael Schreiber
Asked: 2023-08-26 02:27:08 +0800 CST

A ligação do Blazor à entrada de texto não funciona após inserir um valor na entrada

  • 772

Meu requisito é ter uma entrada de texto onde os usuários possam inserir texto, mas para o qual o valor também possa ser definido de outra forma (por exemplo, por meio de um botão). Eu uso o .Net 7 em um projeto de servidor blazor. Criei a seguinte UI simples para reproduzir um problema que tenho em uma construção mais complexa: IU simples

Código da navalha:

Text Input:
<input type="text" @bind-Value=Value @bind-Value:event="oninput" />
<br />
<button class="btn btn-primary" @onclick="IncrementCounter">Increment Counter and set Value </button>
<br />
Current Value: @Value
<br />
Current Counter Value: @_counter

Código C#:

@code {
    private int _counter = 1000;

    private string? Value { get; set; }

    private void IncrementCounter()
    {
        _counter++;
        Value = _counter.ToString();
    }
}

Quando clico no botão, o valor na entrada de texto é definido conforme o esperado. Ou seja, é definido com o valor atual do contador e o contador é incrementado. Quando insiro algo na entrada de texto, o valor é mostrado abaixo do botão ("Valor Atual"). Porém, agora o botão não atualiza mais o conteúdo da entrada de texto. O texto simples de @Valuestill mostra que a Valuepropriedade está definida conforme o esperado. A ligação da entrada de texto à Valuepropriedade ainda funciona, mas não o contrário. Qualquer idéia de como resolver isso é muito bem-vinda.

Tentei:

  • Implemento INotifyPropertyChangedpara a Valuepropriedade.
  • Ligue StateHasChangeddentro do IncrementCounter().
  • Ligue para StateHasChangeddentro da Valuepropriedade.
  • Ligue StateHasChangedatravés de outro botão.
  • Outro exemplo em que a entrada de texto estava em um componente com Valueum arquivo Parameter. Neste exemplo também implementei um arquivo ValueChanged EventCallback.

Nada funcionou.

Desculpe, eu estava desesperado.

blazor

2 respostas

  1. Best Answer

    Você precisa usar @bind-value('v' minúsculo) ou @bindsozinho.

    <input type="text" @bind-value=Value @bind-value:event="oninput" />
<input type="text" @bind=Value @bind:event="oninput" />

    Violino Blazor

    • 1

  2. Como complemento à resposta do @RBee, você pode eliminar o código de conversão de texto e vincular diretamente ao contador.

    O compilador Razor implementará o código de conversão necessário nos bastidores ao criar a funcionalidade de ligação na classe de componente C# gerada.

    @page "/"

<PageTitle>Index</PageTitle>

<div class="p-2 mb-3">
    <label class="label">
        Counter Input:
    </label>
    <input class="form-control" type="number" @bind="_counter" @bind:event="oninput" />
</div>
<div class="mb-3 text-end">
    <button class="btn btn-primary" @onclick="IncrementCounter">Increment Counter and set Value </button>
</div>

<div class="bg-dark text-white m-2 p-2">
    <pre>Current Counter Value: @_counter</pre>
</div>

@code {
    @code {
        private int _counter = 1000;

        private void IncrementCounter()
        {
            _counter++;
        }
    }
}
    • 0

relate perguntas