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

Posted 2023-03-27

【中文标题】插入后不会立即更改 Blazor 文本

【英文标题】：Blazor text is not changed immediately upon insertion

【发布时间】：2021-10-24 19:28:09

【问题描述】：

我有一个应用程序，用户可以在其中在某个位置插入文本。文本显示在同一页面的徽章上。我想要的是，当用户键入时，更改会立即显示在徽章中。 我添加了一个 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; 

【问题讨论】：

对 MudBlazor 不熟悉，建议您先检查@oninput 是否被正确调用。将其分解为一个方法并放入一个断点。如果是这样，在设置itemAttribute.Title 后调用StateHasChanged 作为@oninput 的一部分应该会触发更新。

【参考方案1】：

简单尝试：

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

【讨论】：

就是这样。谢谢。

【参考方案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();