在Blazor .NET 8中，单击按钮时CSS样式更改未生效。

Question

我正在尝试从Blazor的后台代码中操作CSS类，但不论怎么尝试都没有成功。

private async Task SetAnswerColorAsync()
{
   cssClass = isCorrect ? "correct" : "incorrect";

   if (isCorrect)
   {
      await js.InvokeVoidAsync("appendToElement", $"{OptionId}", cssClass, "Correct Message");
          
    }
    
    else
    {
        await js.InvokeVoidAsync("appendToElement", $"{OptionId}", cssClass, "In Correct");
    }
    return 1;
}

如图所示，每个选项都有一个option_Number的ID：


    
        
        Test
        
        Quizzing!
        How much is 1+1?

当选择正确答案时，我希望将其背景颜色更改为在站点CSS中定义的不同颜色。

.option {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: -0.3px 0.3px 3px rgba(0,0,0,0.3);
}

.incorrect {
    background-color: red;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: -0.3px 0.3px 3px rgba(0,0,0,0.3);
}

.correct {
    background-color: green;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: -0.3px 0.3px 3px rgba(0,0,0,0.3);
}

.option:hover {
    background-color: #28a745;
    color: #fff;
    border-radius: 3px;
    padding: 10px;
}

该函数通过onclick事件调用：

protected async void SelectOption()
{
   var test = OptionId;
   GetOptionStyle(Option);
   await SetAnswerColorAsync();
   await OnOptionSelected.InvokeAsync(Option);
}

HTML部分：

@Option

RomanPerekhrest · Answer

当操纵DOM（在您的情况下是更改类列表）时，应尽可能使用Blazor。通过JS所做的任何更改很可能在Blazor决定重新渲染组件时丢失。

以下是一个基于本地状态更改类列表的简单示例：




这是目标div





@code {
  private string Color { get; set; }

  private void SetColor(string color)
  {
    Color = color;
  }
}

请注意，我如何根据某个事件设置Color属性的值，并在class属性中使用该值。我还包含了任意的my-class来展示您可以将静态和动态值结合使用。

在您的应用场景中可能更复杂一些，在这种情况下，您可以使用一个函数来确定向选项添加哪个类。

@Option

@code {
  private bool isCorrect;
  private string Option { get; set; }
  
  private string GetClass()
  {
    return isCorrect ? "correct" : "incorrect";
  }
}

我的示例以及您问题场景的在线演示：https://blazorfiddle.com/s/nk1nsze8。

Adam Rosenfield · Answer

难道你不能这样做吗？