插入后不会立即更改 Blazor 文本

Question

我有一个应用程序，用户可以在其中的特定位置插入文本。文本显示在同一页面的徽章上。我想要的是，当用户键入时，更改会立即显示在徽章中。我已经添加了一个 oninput 事件，但似乎 oninput 事件没有更新剃刀页面，因为当我有输入更改时，徽章仍然是空白的。只有在 TextField 上失去焦点时才会显示文本。

如何才能在插入字母时立即显示在徽章上？

文本输入：

<MudTextField @bind-Value="@itemAttribute.Title" @oninput="(e)=> itemAttribute.Title = e.Value.ToString()" />

徽章：

<MudBadge Overlap="false" Style="@($"color: #CFD8DC;")" Color="Color.Transparent" Content="@itemAttribute.Title">

变量：

 [Parameter] public ItemAttribute itemAttribute { get; set; }

Answer 1

简单尝试：

<MudTextField @bind-Value="@itemAttribute.Title" Immediate="true" />

Answer 2

你应该使用StateHasChanged方法。 StateHasChanged 方法通知组件其状态已更改。适用时，这将导致重新呈现组件。

你可以试试这个代码：

文本输入：

<MudTextField @bind-Value="@itemAttribute.Title" @oninput="()=> UpdateBadge()" />

徽章：

<MudBadge @bind-Value="@BadgeContent.Title" Overlap="false" Style="@($"color: #CFD8DC;")" Color="Color.Transparent" Content="@itemAttribute.Title">

代码：

[Parameter] public ItemAttribute itemAttribute { get; set; }
[Parameter] public ItemAttribute BadgeContent { get; set; }

private void UpdateBadge()
{
   BadgeContent.Title = itemAttribute.Title;
   StateHasChanged();
}

插入后不会立即更改 Blazor 文本

Blazor text is not changed immediately upon insertion

c#

asp.net

blazor

mudblazor