@bind 之后的 Blazor 事件答案

【问题标题】：Blazor event after @bind@bind 之后的 Blazor 事件
【发布时间】：2021-10-08 18:59:55
【问题描述】：

在 Blazor 页面中，我有一个复选框输入元素的集合，这些元素通过代码绑定到布尔属性

foreach(var item in items)
{
   <input type="checkbox" class="checkbox" @bind="@item.IsReady" @onclick="((e)=>ItemIsReady(item))" />
}

我正在寻找一种方法在绑定完成之后触发 ItemIsReady 函数。目前该函数在绑定完成之前触发。

某种形式的@bind 指令是必要的，因为页面会加载项目，并且准备好的项目需要在加载后出现检查。

我不能在属性设置器中使用函数。

有人知道怎么做吗？

【问题讨论】：

标签： event-handling blazor bind

【解决方案1】：

“我正在寻找一种在绑定完成后触发ItemIsReady函数的方法。目前该函数在绑定完成之前触发。”

我假设您想对复选框所做的更改做出反应。也许我错了。

如果您想捕捉更新事件，那么您可以：

使用绑定并捕获属性设置器上的事件或
手动连接输入。

下面的演示页面展示了如何做到这一点：

@page "/Test"
@foreach (var item in model)
{
    <div><input type="checkbox" class="checkbox" checked="@item.IsReady" @onchange="((e)=>ItemIsReady(e, item))" /> <span>@item.IsReady</span></div>
}

@code  {

    List<ModelClass> model { get; set; } = new List<ModelClass> { 
       new ModelClass(), 
       new ModelClass() { IsReady=true }, 
       new ModelClass() 
    };

    class ModelClass
    {
        public bool IsReady { get; set; }
    }

    void ItemIsReady(ChangeEventArgs e, ModelClass item)
    {
        item.IsReady = (bool)e.Value;
    }
}

【讨论】：

谢谢，我没有意识到我可以使用checked="@item.IsReady"直接绑定到html。