如何在FluentListBox中实现值的双向绑定？

你遇到的问题是FluentListBox的@bind-Value未正确触发反向绑定更新，可通过以下两种方式实现正常双向绑定：

方式一：显式绑定Value与ValueChanged事件 #

直接拆分双向绑定的逻辑，手动处理值变更事件：

@using Microsoft.Fast.Components.FluentUI;
@page "/test"

<FluentListbox Value="@_value" ValueChanged="@((string newValue) => _value = newValue)">
    <FluentOption Value="First Value">First Value</FluentOption>
    <FluentOption Value="Second Value">Second Value</FluentOption>
    <FluentOption Value="Third Value">Third Value</FluentOption>
</FluentListbox>
<h1>@_value</h1>

@code {
    private string _value = string.Empty;
}

方式二：显式指定绑定触发事件 #

保留@bind-Value写法，同时明确指定触发双向更新的事件：

@using Microsoft.Fast.Components.FluentUI;
@page "/test"

<FluentListbox @bind-Value="_value" @bind-Value:event="ValueChanged">
    <FluentOption Value="First Value">First Value</FluentOption>
    <FluentOption Value="Second Value">Second Value</FluentOption>
    <FluentOption Value="Third Value">Third Value</FluentOption>
</FluentListbox>
<h1>@_value</h1>

@code {
    private string _value = string.Empty;
}

另外建议检查当前使用的Fluent UI Blazor组件版本，部分旧版本存在双向绑定兼容性问题，更新至最新稳定版也可解决此类问题。

内容的提问来源于stack exchange，提问作者Ascendise