Blazor中点击按钮如何仅为选中元素单独应用对应样式

问题核心原因 #

你当前代码中所有可编辑元素共用了全局的isBold、isItalic状态变量，所以只要修改这两个变量，所有绑定了对应变量的元素样式都会同步变更。要实现仅修改选中元素的样式，核心是要为每个元素存储独立的样式状态，同时记录当前选中的元素标识。

具体实现方案 #

实现步骤

1. 定义可编辑元素的数据模型，为每个元素存储独立的样式属性
2. 新增变量记录当前选中的元素唯一ID
3. 点击元素时更新当前选中ID，点击工具栏操作按钮时，仅修改对应ID元素的样式属性

改造后完整代码

<nav hidden="@(canvasToolbar)" class="navbar navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
            TEXT
        </a>
        <button @onclick="@Bold"><b>B</b></button>
        <button @onclick="@Italic"><b>I</b></button>
    </div>
</nav>

<nav hidden="@(textToolbar)" class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
            CANVAS
        </a>
    </div>
</nav>

@* 遍历渲染可编辑元素 *@
@foreach (var elem in EditableElements)
{
    var fontWeight = elem.IsBold ? "bold" : "normal";
    var fontStyle = elem.IsItalic ? "italic" : "normal";
    if (elem.TagName == "p")
    {
        <p style="color: @elem.Color; font-weight: @fontWeight; font-style: @fontStyle" 
           @onclick="@(() => SelectElement(elem.Id))">
            @elem.Content
        </p>
    }
    else if (elem.TagName == "button")
    {
        <button style="color: @elem.Color; font-weight: @fontWeight; font-style: @fontStyle" 
                @onclick="@(() => SelectElement(elem.Id))">
            @elem.Content
        </button>
    }
}

<div style="color: orange" @onclick="@ShowCanvasToolbar">Show Canvas toolbar</div>

@code{
    private bool textToolbar { get; set; } = true;
    private bool canvasToolbar { get; set; } = false;

    // 可编辑元素数据模型
    public class EditableElement
    {
        public string Id { get; set; }
        public string Content { get; set; }
        public string TagName { get; set; }
        public string Color { get; set; }
        public bool IsBold { get; set; }
        public bool IsItalic { get; set; }
    }

    // 初始化可编辑元素列表
    private List<EditableElement> EditableElements = new List<EditableElement>
    {
        new EditableElement { Id = "elem1", TagName = "p", Content = "HH", Color = "purple" },
        new EditableElement { Id = "elem2", TagName = "button", Content = "Hello", Color = "red" }
    };

    // 存储当前选中的元素ID
    private string selectedElementId { get; set; }

    [Parameter] public string CssStyles { get; set; }
    [Parameter] public EventCallback TextBold { get; set; }

    // 选中元素时触发
    private void SelectElement(string elemId)
    {
        selectedElementId = elemId;
        ShowTextToolbar();
    }

    private void ShowTextToolbar()
    {
        textToolbar = true;
        canvasToolbar = false;
    }

    private void ShowCanvasToolbar()
    {
        canvasToolbar = true;
        textToolbar = false;
    }

    // 仅修改当前选中元素的加粗状态
    private void Bold()
    {
        if (string.IsNullOrEmpty(selectedElementId)) return;
        var targetElem = EditableElements.FirstOrDefault(e => e.Id == selectedElementId);
        if (targetElem != null) targetElem.IsBold = !targetElem.IsBold;
    }

    // 仅修改当前选中元素的斜体状态
    private void Italic()
    {
        if (string.IsNullOrEmpty(selectedElementId)) return;
        var targetElem = EditableElements.FirstOrDefault(e => e.Id == selectedElementId);
        if (targetElem != null) targetElem.IsItalic = !targetElem.IsItalic;
    }
}

改造说明 #

• 每个可编辑元素都有独立的样式属性存储，不会互相影响
• 只有当前选中的元素会响应工具栏的样式修改操作
• 后续如果需要新增颜色、字体等修改能力，只需要在EditableElement模型中新增对应属性，再补充工具栏逻辑即可

内容的提问来源于stack exchange，提问作者Tania Martínez