主页 / coding / 问题 / 79545196
Accepted
Sam
Asked: 2025-03-31 05:41:38 +0800 CST

在 Blazor WASM 应用中绑定子组件中的输入

  • 772

我正在开发针对 .NET 9 的 Blazor WASM（独立）应用程序中的自动完成组件版本。

我能够使用以下代码将 绑定input到string变量并在用户输入其搜索关键字时采取行动，并且它工作正常，但是当我尝试将自动完成的 UI 移动到组件中时，将 绑定到我的变量似乎不起作用。该部件继续正常工作，并且我在每次击键后都会点击我的方法。@bind:afterinputbind:after

这是运行良好的代码，然后我将其移入一个组件：

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

...

@code {
   private string? UserInputText = "";

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

然后，我将 UI 部分放入我正在创建的新组件中，以将自动完成功能封装到其自己的组件中。

这是父代码：

...

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

...

@code {
   private string? UserInput = "";

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

以下是组件内部的代码AutoComplete：

@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; }
}

顺便说一句，我尝试使用EventCallback而不是Action传递OnUserInputChanged给自动完成组件，但随后收到一条错误，指出：

参数 1：无法从“Microsoft.AspNetCore.Components.EventCallback”转换为“System.Action”

还请记住，OnUserInputChanged即使我将该逻辑放入新组件中，接线实际上仍能正常工作。不再起作用的部分是绑定UserInputText到input组件内部。

我哪里犯了错误？

asp.net-core

1 个回答

  1. Best Answer

    您不应将组件参数绑定到输入 - 而是使用本地参数。

    原因是 Blazor 会保留组件状态的副本，并在组件即将呈现时根据该状态设置参数。如果在组件内绑定到该参数，则可能会出现竞争条件。

    因此，您的代码可能采用的一种方法是将输入绑定到本地属性，该属性具有一个返回参数值的 getter 和一个更新本地字段的 setter。然后，您可以将本地字段（即当前值）传递给您的操作 UserInputTextChangedHandler，并允许父级从那里更新其状态。

    自动完成.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; } = [];
}

    父母

    <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

相关问题