如何在MudBlazor中为AdornmentText启用OnClick事件

问题排查 #

你代码里的问题主要有两点：

• ReadOnly属性绑定错误：rt.AutoWidth是变量，需要加@符号才能正确绑定布尔值，否则会被当成字符串解析。
• OnAdornmentClick事件绑定缺少@符号：Blazor中绑定事件回调需要用@前缀关联到代码里的方法。

完整实现代码 #

<MudTextField 
    AdornmentColor="Color.Primary" 
    AdornmentText="@AText"  
    @OnAdornmentClick="AdornmentChange" 
    Margin="Margin.Dense" 
    Adornment="Adornment.End" 
    ReadOnly="@rt.AutoWidth" 
    @bind-Value="rt.width"  
    Label="Width" 
    Variant="Variant.Outlined" 
/>

@code {
    // 假设rt是你的模型实例，这里示例定义一个简单模型
    private YourModel rt = new YourModel();
    private string AText = "切换"; // 初始装饰文本

    private void AdornmentChange()
    {
        // 切换装饰文本内容
        AText = AText == "切换" ? "已切换" : "切换";
        // 如果需要同步修改只读状态，可在此添加逻辑
        // rt.AutoWidth = !rt.AutoWidth;
    }

    // 示例模型类，根据你的实际业务调整
    public class YourModel
    {
        public bool AutoWidth { get; set; } = false;
        public string width { get; set; } = "";
    }
}

关键说明 #

• AText作为组件内可修改的变量，点击事件触发时直接修改值，Blazor会自动更新UI。
• 如果需要给点击事件传递参数，可使用@OnAdornmentClick="() => AdornmentChange(自定义参数)"的形式。
• ReadOnly属性必须绑定布尔类型值，若不需要只读功能，可直接设置为ReadOnly="false"。

内容的提问来源于stack exchange，提问作者Mahar Faiq lak