Blazor WebAssembly子组件状态同步：基于Child1启用Child2输入

你的问题根源在于Blazor的组件状态更新机制：MyModel是普通引用类型，当Child1修改它的内部属性时，Blazor不会自动检测到引用内部的变化；同时Child1调用StateHasChanged()只会刷新自身，无法触发Child2的重新渲染，导致Child2的Disabled状态无法同步更新。

方案一：让模型实现INotifyPropertyChanged（推荐长期维护） #

这是符合Blazor数据绑定规范的标准做法，让模型属性变化时主动通知所有绑定的组件。

1. 修改MyModel实现接口 #

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class MyModel : INotifyPropertyChanged
{
    private int? _adminUserId;
    private UserDTO? _adminUser;
    private int? _customerUserId;
    private UserDTO? _customerUser;
    private int? _superUserId;
    private UserDTO? _superUser;

    public int? AdminUserId
    {
        get => _adminUserId;
        set
        {
            if (_adminUserId != value)
            {
                _adminUserId = value;
                OnPropertyChanged();
            }
        }
    }

    public UserDTO? AdminUser
    {
        get => _adminUser;
        set
        {
            if (_adminUser != value)
            {
                _adminUser = value;
                OnPropertyChanged();
            }
        }
    }

    public int? CustomerUserId
    {
        get => _customerUserId;
        set
        {
            if (_customerUserId != value)
            {
                _customerUserId = value;
                OnPropertyChanged();
            }
        }
    }

    public UserDTO? CustomerUser
    {
        get => _customerUser;
        set
        {
            if (_customerUser != value)
            {
                _customerUser = value;
                OnPropertyChanged();
            }
        }
    }

    public int? SuperUserId
    {
        get => _superUserId;
        set
        {
            if (_superUserId != value)
            {
                _superUserId = value;
                OnPropertyChanged();
            }
        }
    }

    public UserDTO? SuperUser
    {
        get => _superUser;
        set
        {
            if (_superUser != value)
            {
                _superUser = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 无需修改子组件代码 #

模型实现INotifyPropertyChanged后，Blazor会自动监听属性变化，Child2的Disabled="@(Model.SuperUser == null)"会自动同步状态，不需要额外触发刷新。

方案二：通过父组件转发状态更新（适合快速修复） #

如果不想修改模型结构，可以通过Child1触发父组件的回调，让父组件统一刷新所有子组件。

1. 在Child1中添加回调参数 #

[Parameter] public EventCallback OnSuperUserChanged { get; set; }

2. 修改Child1的状态更新方法 #

private async void OnSuperUserCleared(MouseEventArgs args)
{
    Model.SuperUser = null;
    Model.SuperUserId = null;
    await OnSuperUserChanged.InvokeAsync();
}

private async void OnSuperUserValueChanged(UserDTO value)
{
    Model.SuperUser = value;
    Model.SuperUserId = value.Id;
    await OnSuperUserChanged.InvokeAsync();
}

3. 父组件绑定回调并刷新 #

<Child1 Model="model" OnSuperUserChanged="() => StateHasChanged()" />
<Child2 Model="model" />

当Child1修改SuperUser时，会通知父组件调用StateHasChanged()，父组件刷新会带动Child2重新渲染，从而更新Disabled状态。

• 避免在子组件中直接操作父组件的状态，遵循组件封装原则。
• 方案一的INotifyPropertyChanged是多组件共享模型时的最佳实践，能避免后续类似的状态同步问题。
• MudBlazor组件的Disabled属性只会在组件渲染时求值，只有组件重新渲染才会更新状态。

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