如何让 Blazor 中的光标闪烁？答案

【问题标题】：How to make a cursor blink in Blazor?如何让 Blazor 中的光标闪烁？
【发布时间】：2021-11-03 23:16:49
【问题描述】：

//如何让光标闪烁？在这个例子中，我使用了一个计时器，在调试模式下，我可以//看到 CursorCssClass 发生变化，但光标在浏览器中闪烁。

<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
    <div class="hero-container">
        <h1>test test</h1>
        <p>I'm tester <span style="@CursorCssClass">|</span></p>
    </div>
</section>
@code {

    private bool hideCursor = true;
    private System.Timers.Timer aTimer;
    private string CursorCssClass => hideCursor ? "opacity: 0" : "opacity: 1";

    private void ToggleCursor()
    {
        aTimer = new System.Timers.Timer();
        aTimer.Interval = 1000;
        aTimer.Elapsed += OnTimedEvent;
        aTimer.AutoReset = true;
        aTimer.Enabled = true;
    }
    private void OnTimedEvent(Object source, System.Timers.ElapsedEventArgs e)
    {
        hideCursor = !hideCursor;
    }
    protected override Task OnInitializedAsync()
    {
      ToggleCursor();
        return base.OnInitializedAsync();
    }
}

【问题讨论】：

void 事件处理程序不会自动更新 UI。你必须运行StateHasChanged() 另外，我对 lambda 样式声明没有经验——它们只在 CursorCssClass 的初始化时运行，还是一种设置器？此外，如果您在服务器托管的站点中使用预渲染，OnInitializedAsync 会运行 2 倍——在这种情况下可能会导致奇怪的结果（我在任何页面事件中创建计时器时遇到问题）。
添加 CSS 隔离文件（如 Index.razor.css）并使用 CSS，如 codepen.io/ArtemGordinsky/pen/GnLBq

标签： c# html css .net blazor

【解决方案1】：

计时器是一个外部（非 Blazor）事件，因此您需要调用（调用）StateHasChanged：

private void OnTimedEvent(Object source, System.Timers.ElapsedEventArgs e)
{
    hideCursor = !hideCursor;
    InvokeAsync(StateHasChanged);
}

另外，您需要Dispose the Timer。

【讨论】：