Início / coding / Perguntas / 79545196
Accepted
Sam
Asked: 2025-03-31 05:41:38 +0800 CST

Vinculando entrada em um componente filho no aplicativo Blazor WASM

  • 772

Estou trabalhando na minha versão de um componente de preenchimento automático em um aplicativo Blazor WASM (autônomo) voltado para o .NET 9.

Eu consigo vincular um inputa uma stringvariável e tomar uma ação conforme o usuário digita sua palavra-chave de pesquisa usando @bind:aftero código a seguir e funciona bem, mas quando tento mover a UI do meu autocompletar para um componente, vincular o inputà minha variável parece não funcionar. A bind:afterparte continua funcionando bem e eu aperto meu método após cada pressionamento de tecla.

Aqui está o código que funciona bem e que então movo para um componente:

...
<input @bind="UserInputText" @bind:event="oninput" @bind:after="OnUserInputChanged" />

...

@code {
   private string? UserInputText = "";

   private void OnUserInputChanged()
   {
      // Process user input and make suggestions
   }
}

Em seguida, pego a parte da interface do usuário e a coloco em um novo componente que estou criando para encapsular o preenchimento automático em seu próprio componente.

Aqui está o código pai:

...

<AutoComplete UserInputText="UserInput" UserInputTextChangedHandler="OnUserInputChanged" />

...

@code {
   private string? UserInput = "";

   private void OnUserInputChanged()
   {
      // Process user input and make suggestions
   }
}

E aqui está o código dentro do AutoCompletecomponente:

@typeparam TItem

<div>
   <input @bind="UserInputText" @bind:event="oninput" @bind:after="UserInputTextChangedHandler" />
</div>

@code {

   [Parameter]
   public string? UserInputText { get; set; }

   [Parameter]
   public Action UserInputTextChangedHandler { get; set; }

   [Parameter]
   public List<TItem> Suggestions { get; set; }
}

A propósito, tentei usar EventCallbackem vez de Actionpara passar OnUserInputChangedpara o componente de preenchimento automático, mas então recebo um erro que diz:

Argumento 1: não é possível converter de 'Microsoft.AspNetCore.Components.EventCallback' para 'System.Action'

Por favor, tenha em mente também que a fiação OnUserInputChangedcontinua funcionando bem mesmo depois que eu coloco essa lógica no novo componente. A parte que não funciona mais está vinculada UserInputTextao inputinterior do componente.

Onde estou cometendo um erro?

asp.net-core

1 respostas

  1. Best Answer

    Você não deve vincular um parâmetro de componente a uma entrada - use um local.

    O motivo é que o Blazor mantém uma cópia do estado do Componente e definirá seu Parâmetro a partir desse estado quando o Componente for renderizado. Se você vincular esse Parâmetro dentro do Componente, você tem uma condição de corrida potencial.

    Então, uma abordagem possível para seu código pode ser vincular a entrada a uma propriedade local que tem um getter que retorna o valor do parâmetro, um setter que atualiza um campo local. Você pode então passar o campo local (ou seja, o valor atual) para sua ação UserInputTextChangedHandler e permitir que o pai atualize seu estado a partir daí.

    AutoComplete.razor

    @typeparam TItem

<div>
    <input list=suggestions @bind=BindableInputText @bind:event=oninput @bind:after=@(()=>UserInputTextChangedHandler(_currentInputText)) />
    <datalist id=suggestions>
        @foreach (var item in Suggestions ?? [])
        {
            <option>@item</option>
        }
    </datalist>
</div>

@code {
    private string? _currentInputText;
    private string? BindableInputText { get => UserInputText; set => _currentInputText = value; }

    [Parameter]
    public string? UserInputText { get; set; }

    [Parameter]
    public required Action<string?> UserInputTextChangedHandler { get; set; }

    [Parameter]
    public List<TItem>? Suggestions { get; set; } = [];
}

    Pai

    <AutoComplete UserInputText=@UserInput UserInputTextChangedHandler="OnUserInputChanged" Suggestions=@Suggestions />

<div>Text entered: @UserInput</div>
@code {
    private string? UserInput = "";
    private List<string> Suggestions = [];
    private void OnUserInputChanged(string? UserInputText)
    {
        UserInput = UserInputText;  
        Suggestions = Enumerable.Range(1,5).Select(i=> $"{UserInputText} {i}").ToList();
        StateHasChanged();
    }
}
    • 1

relate perguntas