有没有办法通过单击触发 Blazor 中的两个连续事件？

Question

背景
我在 Blazor WASM 中创建了名为 SET 的纸牌游戏。在这个游戏中，您单击 3 张牌，这可能会导致 SET 成功或错误提交。它运行良好，现在我想添加一个额外的功能来表示提交的结果。

想要的结果
第一种方法：点击第三张卡片后，这三张卡片应该得到绿色（正确）或红色（错误）背景，并且在 x 之后第二种方法应该触发的时间量（比如 1 秒）。
第二种方法： 如果设置正确，则将 3 张卡片替换为 3 张新卡片。如果设置为 false，则将背景颜色重置为白色并将边框颜色重置为黑色。

当前的实际结果
目前发生的情况是第一种方法（绿色/红色背景）的结果没有显示，因为只有一个回调事件。所以它确实被执行了，但直到第二个方法也被执行后才会变得可见，此时卡片已被替换，或者背景颜色/边框颜色已被重置。

目前尝试过
我试图在@onclick 事件中分离这两个方法，但仍然只有一个事件回调，到目前为止我找不到另一种方法来做到这一点，也没有堆栈溢出。

@onclick="() => { ProcessSelection(uniqueCardCombinations[index]); ProcessSetReplacement(); }

最显着的区别是 EventCallback 是单次转换 事件处理程序，而 .NET 事件是多播的。布雷泽 EventCallback 旨在被分配一个值，并且只能 回调单个方法。 https://blazor-university.com/components/component-events/

我还尝试了 Chris Sainty 在此处描述的“状态容器”，但这只会重新渲染它，我无法根据我的情况对其进行调整（甚至不确定这是否可行）： https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/

代码
我确实打算在代码开始工作后对其进行清理，使其更具描述性并进一步拆分 ProcessSetReplacement，但希望首先使其工作。

如果您需要更多背景/代码信息，请告诉我，或者您可以在此处找到整个存储库：https://github.com/John-Experimental/GamesInBlazor/tree/21_AddSetValidationVisualisation

SetPage.razor：

<div class="cardsContainer">
    @for (int i = 0; i < numberOfCardsVisible; i++)
    {
        var index = i;
        <div class="card @lineClass" style="background-color:@uniqueCardCombinations[index].BackGroundColor; 
                border-color:@uniqueCardCombinations[index].BorderColor;" 
                @onclick="() => { ProcessSelection(uniqueCardCombinations[index]); ProcessSetReplacement(); }">
            @for (int j = 0; j < uniqueCardCombinations[i].Count; j++)
            {
                <div class="@uniqueCardCombinations[i].Shape @uniqueCardCombinations[i].Color @uniqueCardCombinations[i].Border"></div>
            }
        </div>
    }
</div>

SetPage.razor.cs 的相关部分（代码隐藏）

private void ProcessSelection(SetCardUiModel setCard)
    {
        numberOfSelected += _uiHelperService.ProcessCardSelection(setCard);

        if (numberOfSelected == 3)
        {
            var setSubmission = uniqueCardCombinations.Where(card => card.BackGroundColor == "yellow").ToList();
            var potentialSet = _mapper.Map<List<SetCardUiModel>, List<SetCard>>(setSubmission);
            var isSet = _cardHelperService.VerifySet(potentialSet);

            _uiHelperService.SignalSetSubmissionOutcome(setSubmission, isSet);
        };
    }

private void ProcessSetReplacement()
    {
        // If it wasn't a set submission, you do nothing
        if (numberOfSelected == 3)
        {
            var redBorderedCards = uniqueCardCombinations.Where(card => card.BorderColor == "red").ToList();
            var countGreenBorders = uniqueCardCombinations.Count(card => card.BorderColor == "green");

            // The while ensures that the 'ProcessSelection' function, which is also called, has run first
            while (redBorderedCards.Count == 0 && countGreenBorders == 0)
            {
                Thread.Sleep(125);
                redBorderedCards = uniqueCardCombinations.Where(card => card.BorderColor == "red").ToList();
                countGreenBorders = uniqueCardCombinations.Count(card => card.BorderColor == "green");
            }

            // Wait 1.5 seconds so that the user can see the set outcome from 'ProcessSelection' before removing it
            Thread.Sleep(1500);

            if (countGreenBorders == 3)
            {
                // Replace the set by removing the set submission entirely from the list
                uniqueCardCombinations.RemoveAll(card => card.BackGroundColor == "yellow");
                numberOfSelected = 0;

                // Check if the field currently shows more cards than normal (can happen if there was no set previously)
                // If there are more cards, then remove 3 cards again to bring it back down to 'normal'
                numberOfCardsVisible -= numberOfCardsVisible > settings.numberOfCardsVisible ? 3 : 0;

                EnsureSetExistsOnField();
            }
            else
            {
                foreach (var card in redBorderedCards)
                {
                    card.BackGroundColor = "white";
                    card.BorderColor = "black";
                }
            }
        };
    }

Answer 1

当您需要在一个事件中执行多个定时操作时，async 是您的主要工具。

Blazor 将识别异步事件处理程序：

//private void ProcessSelection(SetCardUiModel setCard) 
private async Task ProcessSelection(SetCardUiModel setCard) 
{
    ... // old code    
    await Task.Delay(1000);    
    ProcessSetReplacement();  
}

当您有多个 Task.Delay() 时，请在它们之前添加 StateHasChanged() 调用。

在标记部分：

@onclick="() => ProcessSelection(uniqueCardCombinations[index])"

Answer 2

不要在onclick 中调用这两种方法。

• 致电ProcessSelection，处理结果并在此处设置红色/绿色。
• 致电StateHasChanged()
• 在ProcessSelection 中将计时器设置为一秒。使用来自System.Timers 的计时器。
• 在定时器调用 ProcessSetReplacement 结束时。