如何使光标闪烁在Blazor?

Question

//如何让光标闪烁?在这个例子中，我使用定时器，在调试模式下，我可以//看到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();
}
}

Answer 1

Timer是一个外部(非blazor)事件，所以你需要调用(调用)StateHasChanged:

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

此外，您需要Dispose the Timer.