背景
我在Blazor WASM中创建了名为SET的纸牌游戏。在这个游戏中，你点击3张牌，这可能会导致成功设置或错误提交。它运行良好，现在我想添加一个额外的功能来表示提交的结果。
所需结果
第一种方法：点击第三张牌后，这三张牌的背景应该是绿色(正确(或红色(错误(，经过x段时间(比如1秒(后，第二种方法应该启动。
第二种方法：如果设置正确，用3张新卡替换3张卡。如果设置为false，请将背景颜色重置为白色，并将边框颜色重置为黑色。
实际当前结果
当前发生的情况是第一个方法(绿色/红色背景(的结果没有显示，因为只有一个回调事件。因此，它确实被执行了，但在第二个方法也被执行之前，它不会变得可见，此时卡片已经被替换，或者背景颜色/边界颜色已经重置。
到目前为止已经尝试过
我试图在@onclick事件中分离这两个方法，但仍然只有一个事件回调，到目前为止我找不到其他方法，也找不到堆栈溢出。
@onclick="() => { ProcessSelection(uniqueCardCombinations[index]); ProcessSetReplacement(); }
最显著的区别是EventCallback是一个单一的演员阵容事件处理程序，而。NET事件是多播的。BlazorEventCallback是指被分配一个值，并且只能回调单个方法。https://blazor-university.com/components/component-events/
我还尝试了"；State Container"；正如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";
}
}
};
}
当您需要在一个事件中执行多个定时操作时，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])"
不要在onclick中同时调用这两个方法。
- 调用
ProcessSelection，处理结果并在那里设置红/绿 - 呼叫
StateHasChanged() - 在
ProcessSelection中将计时器设置为1秒。使用System.Timers中的计时器 - 在计时器运行时调用
ProcessSetReplacement