MudChipField SearchText 值未更新或在 UI 中正确反映

Question

我正在 Blazor 中使用 MudChipField。我已经实现了一种 ClearChipAsync 方法，该方法应该清除 SearchText 和 MudChipField 中的值。但是，虽然在方法中将 SearchText 值设置为空字符串，但它在 UI 中视觉上并不清晰。

<div id="MTIChipSearchField">
    <MudChipField T="string" Class="mud-chip-search" 
                  Values="@Values" ValuesChanged="@((value) => ChipValuesChangedAsync(value))"
                  Value="@SearchText" ValueChanged="@SearchValueChangeAsync" 
                  Placeholder="@Localizer["Search"]" Variant="Variant.Outlined"
                  ChipSize="Size.Medium" WrapChips="true" 
                  Delimiter="@Delimiter" ChipColor="Color.Default" 
                  ChipVariant="Variant.Text" Closeable="true" 
                  OnBlur="HandleBlurAsync">
    </MudChipField>

    @if (Values.Count > 0)
    {
        <div class="clear-chip">
            <MudTooltip Text="Clear All">
                <MudIconButton Icon="@Icons.Material.Outlined.Clear" OnClick="@ClearChipAsync"></MudIconButton>
            </MudTooltip>
        </div>
    }
</div>

private async Task ClearChipAsync()
{
    _isClearing = true;

    SearchText = string.Empty;
    Values.Clear();
    
    await ChipValuesChanged.InvokeAsync(Values);
    await SearchValueChanged.InvokeAsync(SearchText);
    await ClearChipValues.InvokeAsync();

    _isClearing = false;
    StateHasChanged();
}

附加信息：

• 值集合和筹码已正确清除。
• 调用方法SearchValueChanged.InvokeAsync(SearchText)来更新MudChipField。

我尝试过的：

• 确认SearchText确实设置为空字符串。
• 验证在设置 SearchText 后调用 StateHasChanged。

有谁知道为什么 SearchText 视觉上不清晰以及如何解决此问题？

Answer 1

您可以尝试使用“@ref”直接清除绑定：

<MudChipField @ref="field1" ...

@code{
    private MudChipField<string> field1;

    private async Task ClearChipAsync()
    {
        field1.Values.Clear();
...