何时在 Blazor 中使用 ValueChanged 和 ValueExpression?

2023-12-27

我在一些库(MatBlazor、Telerik)中看到了这种常见模式ValueChanged and ValueExpression属性,这真的让我很困惑。

两者有什么区别?以及什么时候使用它?


我想添加一些用例ValueChanged and ValueExpression,

首先,正如 enet 所说,这些属性更像是三位一体的属性,其中您拥有Foo, FooChanged and FooExpression它用于双向数据绑定,例如@bind-Foo="SomeProperty".

创建具有可用于以下用途的属性的自定义组件@bind-您需要提供这3个属性(仅提供Foo and FooChanged也工作)作为[Parameter]并打电话FooChanged当自定义组件内的属性发生更改时。

例如来自埃内特

[Parameter]
public TValue Foo
{
    get => text
    set
    {
        if (text != value) {
            text = value;
            if (FooChanged.HasDelegate)
            {
                FooChanged.InvokeAsync(value);
            }
        }
    }
}

[Parameter]
public EventCallback<TValue> FooChanged { get; set; }

[Parameter]
public Expression<Func<TValue>> FooExpression { get; set; }  

添加@bind-Foo与通过相同Value and ValueChanged,唯一的区别是@bind-只会设置属性,但如果您添加自己的属性ValueChanged,您可以执行任何您想要的操作(验证、更改要设置的值等)。

用例

1 - 创建一个组件来包装另一个组件@bind-

如果您的组件已经具有@bind-Foo并且您想在其之上创建一个组件并仍然作为参数传递@bind-Foo,您只能拥有一项财产并传递给@bind-Foo,您需要将属性传递给Foo, FooChanged and/or FooExpression.

e.g.

CustomInputWrapper.razor

<div>
    <p>My custom input wrapper</p>
    @* If you pass @bind-Value it won't work*@
    @* You need to pass the properties that are used in the bind*@
    <InputText Text="@Value" TextChanged="@ValueChanged" TextExpression="@ValueExpression" />
</div>

@code {    
    [Parameter]
    public virtual string Value { get; set; }

    [Parameter]
    public EventCallback<string > ValueChanged { get; set; }

    [Parameter]
    public Expression<Func<string >> ValueExpression { get; set; }        
}

如果您正在制作大量自定义组件或不想直接使用某些第三方组件,则包装另一个组件的这种情况会经常发生。

我的项目示例:在我的项目中,我使用 MatBlazor 和 Telerik,但并非两个库中的所有组件都完全稳定,因此我围绕所有组件创建了一个包装器,有一天,当这些库之一完全稳定时稳定,我将更改为仅使用一个库。这样做可以让我拥有自定义组件,如果我想更改一个组件,我只需更改自定义组件中的一件事并更改整个应用程序。

2 - 添加默认值

如果你想在 a 中有一个默认值自定义组件,您“可以”只将默认值传递给属性。

[Parameter]
public virtual DateTime Value { get; set; } = new DateTime(/* some default value*/);

但如果您在表单中使用此组件,则会出现一个大问题。

Why?因为你只会改变组件内部的值,但是如果传入一个属性@bind-Value它不会被改变。

要添加此默认值并使其在双向数据绑定中工作,您需要调用ValueChanged并传递默认值。这将使您的组件具有默认值,并且还将更改中的任何属性@bind-Value具有默认值。

e.g.

// Lifecycle after all parameters are set
protected override void OnParametersSet()
{
    // Check if the ValueChanged is set
    if (ValueChanged.HasDelegate)
    {
        ValueChanged.InvokeAsync(DateTime.Now);
    }
}

3 - 您真正需要的用例FooExpression

当您有可为 null 的类型时,例如int?,有时,当值为null,它不知道它的类型,所以你需要通过FooExpression所以它可以通过反射获取类型。这是一个example https://github.com/dotnet/aspnetcore/issues/12226#issuecomment-514346015你需要在哪里使用它。


如果您正在制作自定义组件并且必须使用绑定属性或更改绑定的工作方式,则将更多地使用这些属性的用例。

如果您仅使用已经制作的组件,则很少有需要使用它的情况。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

何时在 Blazor 中使用 ValueChanged 和 ValueExpression? 的相关文章

  • EF Core Group By 翻译支持条件总和

    听说 EF Core 2 1 将支持翻译小组 我感到非常兴奋 我下载了预览版并开始测试它 但发现我在很多地方仍然没有得到翻译分组 在下面的代码片段中 对 TotalFlagCases 的查询将阻止翻译分组工作 无论如何 我可以重写这个以便我
  • 以文化中立的方式将字符串拆分为单词

    我提出了下面的方法 旨在将可变长度的文本拆分为单词数组 以进行进一步的全文索引处理 删除停止词 然后进行词干分析 结果似乎不错 但我想听听关于这种实现对于不同语言的文本的可靠性的意见 您会建议使用正则表达式来代替吗 请注意 我选择不使用 S
  • WCF RIA 服务 - 加载多个实体

    我正在寻找一种模式来解决以下问题 我认为这很常见 我正在使用 WCF RIA 服务在初始加载时将多个实体返回给客户端 我希望两个实体异步加载 以免锁定 UI 并且我想利用 RIA 服务来执行此操作 我的解决方案如下 似乎有效 这种方法会遇到
  • 为什么两个不同的 Base64 字符串的转换会返回相等的字节数组?

    我想知道为什么从 base64 字符串转换会为不同的字符串返回相同的字节数组 const string s1 dg const string s2 dq byte a1 Convert FromBase64String s1 byte a2
  • 动态加载程序集的应用程序配置

    我正在尝试将模块动态加载到我的应用程序中 但我想为每个模块指定单独的 app config 文件 假设我的主应用程序有以下 app config 设置
  • 用于检查类是否具有运算符/成员的 C++ 类型特征[重复]

    这个问题在这里已经有答案了 可能的重复 是否可以编写一个 C 模板来检查函数是否存在 https stackoverflow com questions 257288 is it possible to write a c template
  • 为什么当实例化新的游戏对象时,它没有向它们添加标签? [复制]

    这个问题在这里已经有答案了 using System Collections using System Collections Generic using UnityEngine public class Test MonoBehaviou
  • 使用 WebClient 时出现 System.Net.WebException:无法创建 SSL/TLS 安全通道

    当我执行以下代码时 System Net ServicePointManager ServerCertificateValidationCallback sender certificate chain errors gt return t
  • 带动态元素的 WPF 启动屏幕。如何?

    我是 WPF 新手 我需要一些帮助 我有一个加载缓慢的 WPF 应用程序 因此我显示启动屏幕作为权宜之计 但是 我希望能够在每次运行时更改屏幕 并在文本区域中显示不同的引言 这是一个生产力应用程序 所以我将使用非愚蠢但激励性的引言 当然 如
  • 重载<<的返回值

    include
  • 使用 Bearer Token 访问 IdentityServer4 上受保护的 API

    我试图寻找此问题的解决方案 但尚未找到正确的搜索文本 我的问题是 如何配置我的 IdentityServer 以便它也可以接受 授权带有 BearerTokens 的 Api 请求 我已经配置并运行了 IdentityServer4 我还在
  • SolrNet连接说明

    为什么 SolrNet 连接的容器保持静态 这是一个非常大的错误 因为当我们在应用程序中向应用程序发送异步请求时 SolrNet 会表现异常 在 SolrNet 中如何避免这个问题 class P static void M string
  • 如何在整个 ASP .NET MVC 应用程序中需要授权

    我创建的应用程序中 除了启用登录的操作之外的每个操作都应该超出未登录用户的限制 我应该添加 Authorize 每个班级标题前的注释 像这儿 namespace WebApplication2 Controllers Authorize p
  • 控件的命名约定[重复]

    这个问题在这里已经有答案了 Microsoft 在其网站上提供了命名指南 here http msdn microsoft com en us library xzf533w0 VS 71 aspx 我还有 框架设计指南 一书 我找不到有关
  • 如何序列化/反序列化自定义数据集

    我有一个 winforms 应用程序 它使用强类型的自定义数据集来保存数据进行处理 它由数据库中的数据填充 我有一个用户控件 它接受任何自定义数据集并在数据网格中显示内容 这用于测试和调试 为了使控件可重用 我将自定义数据集视为普通的 Sy
  • 这些作业之间是否存在顺序点?

    以下代码中的两个赋值之间是否存在序列点 f f x 1 1 x 2 不 没有 在这种情况下 标准确实是含糊不清的 如果你想确认这一点 gcc 有这个非常酷的选项 Wsequence point在这种情况下 它会警告您该操作可能未定义
  • Windows 窗体:如果文本太长,请添加新行到标签

    我正在使用 C 有时 从网络服务返回的文本 我在标签中显示 太长 并且会在表单边缘被截断 如果标签不适合表单 是否有一种简单的方法可以在标签中添加换行符 Thanks 如果您将标签设置为autosize 它会随着您输入的任何文本自动增长 为
  • 混合 ExecutionContext.SuppressFlow 和任务时 AsyncLocal.Value 出现意外值

    在应用程序中 由于 AsyncLocal 的错误 意外值 我遇到了奇怪的行为 尽管我抑制了执行上下文的流程 但 AsyncLocal Value 属性有时不会在新生成的任务的执行范围内重置 下面我创建了一个最小的可重现示例来演示该问题 pr
  • 使用.NET技术录制屏幕视频[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有没有一种方法可以使用 NET 技术来录制屏幕 无论是桌面还是窗口 我的目标是免费的 我喜欢小型 低
  • 对来自流读取器的过滤数据执行小计

    编辑问题未得到解答 我有一个基于 1 个标准的过滤输出 前 3 个数字是 110 210 或 310 给出 3 个不同的组 从流阅读器控制台 问题已编辑 因为第一个答案是我给出的具体示例的字面解决方案 我使用的实际字符串长度为 450 个

随机推荐

  • 在 Windows 中更改 org.eclipse.swt.widgets 背景颜色

    现在我正在尝试使用以下代码更改 org eclipse swt widgets Button 的背景颜色 Button sceneButton new Button border SWT TOGGLE SWT FLAT sceneButto
  • 识别矩阵中的值

    我有一个问题 然后我需要你的帮助来解决它 我有一个矩阵A A 0 0 1 2 3 4 0 1 2 3 4 0 0 0 0 0 0 1 2 3 4 0 1 2 3 4 0 0 然后我想知道矩阵 A 中每行的每个值 1 的个数与矩阵 A 中每行
  • ReferenceError:请求未定义

    我正在尝试复制一个脸书消息机器人 https developers facebook com docs messenger platform guides quick start但继续得到request is not defined 与 F
  • Prettier.js 方法关于换行格式的参数

    我正在运行 Prettier js VSCode 插件 prettier eslint cli 它将超过 80 个字符限制的方法参数格式化如下 将每个参数放在新行中 someMethod argumentOne argumentTwo ar
  • 值表/树

    我的问题 有没有办法创建价值树 类似于命令 TreeForm 的输出 但是节点中的值呢 我为什么要这个 我正在尝试编写一个完整的程序来分析我的实验课程的输出 每列数据作为一个符号分配 一般来说 每一列都是有意义的 它不仅仅是一堆不同的变量
  • 如何创建点分
    标签? [复制]

    这个问题在这里已经有答案了 如何使用 CSS 创建虚线或任何类型的 hr 线 双线 虚线等 hr 或者还有其他技巧吗 你可以有 hr style border top dotted 1px 那应该有效
  • 访问 json 树的叶子

    我有一个以下形式的 JSON 文件 id 442500000116137984 reply 0 children id 442502378957201408 reply 0 children id 442500001084612608 re
  • RestKit 映射 XML 元素主体

    如何为 XML 元素主体创建 RestKit 对象映射到对象属性 XML
  • 我可以在 GDB 的“内存访问”上设置断点吗?

    我正在通过 gdb 运行应用程序 并且我想在访问 更改特定变量的任何时间设置断点 有没有好的方法来做到这一点 我也对监视 C C 中的变量以查看它是否 何时发生变化的其他方法感兴趣 watch仅在写入时中断 rwatch让你继续阅读 并且a
  • App.config 替换单元测试

    我的持续集成服务器 TeamCity 配置为在构建时运行我们应用程序中的所有单元测试 在运行这些测试之前 我需要更改一些 appSettings 以使它们对我们的 CI 服务器有效 我通过使用 Visual Studio 提供的部署项目为我
  • Google Calendar Api 不要求 Oauth Screen

    我最近用过Google Calendar API 我已经创建了项目并生成了凭据 对于本地主机 我使用了以下凭据 installed client id xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx apps google
  • 如何将LogCat内容保存到文件?

    我添加了调试字符串 使用 Log d 并希望在 logCat 内容的上下文中查看它们 LogCat 的 保存 图标有一个 保存所选项目 提示 但必须有一种快速方法来保存整个内容 或选择整个内容 但我不知道该怎么做 要将 Log cat 内容
  • 如何在预测后保留 xts 时间序列数据中的日期

    请考虑这个小数据集 library xts library ggplot2 library forecast data lt data frame idDate c 12 12 2012 13 12 2012 14 12 2012 16 1
  • 如何使用 Google Sheets 脚本查找列中第一个匹配项的索引?

    我正在尝试使用 Google Sheets 脚本查找列中第一个匹配项的索引 function getRowIndex var lookupValue car var ss SpreadsheetApp getActiveSpreadshee
  • bean实例化失败;嵌套异常是 java.lang.NoClassDefFoundError: org/apache/log4j/Logger

    我试图让公共日志记录适用于 log4j 配置 但在启动服务器时不断出现异常 当尝试使用 StringUtils 时 我也遇到了类似的异常 该异常可通过另一个公共库获得 org springframework beans factory Be
  • 具有自定义接收器的 Spark 结构化流中的输入行数

    我在结构化流 spark 2 2 0 中使用自定义接收器 并注意到 Spark 为输入行数生成了错误的指标 它始终为零 我的流构建 StreamingQuery writeStream session readStream schema R
  • 如何根据嵌套键值删除JSONB列中的数组元素?

    如何根据对象键之一的值从数组中删除对象 该数组嵌套在父对象内 这是一个示例结构 foo1 bar1 123 bar2 456 bar1 789 bar2 42 foo2 some other stuff 我可以根据以下值删除数组元素吗bar
  • 在 Android/Jetpack Compose 中手动预填充导航后台

    是否可以在 Android Jetpack Compose 中预填充导航后台 我有一个深层链接 可以深入导航层次结构 但是 按后退时 它会导航到根路线 Example Route Main gt Route List gt Route De
  • 请求相机权限 Flutter Web

    我需要在我的网络应用程序中使用相机 所以我想如果用户拒绝在他 她的浏览器上使用相机 我会再次请求它允许相机许可 这是我的代码 import package universal html html dart as html RaisedBut
  • 何时在 Blazor 中使用 ValueChanged 和 ValueExpression?

    我在一些库 MatBlazor Telerik 中看到了这种常见模式ValueChanged and ValueExpression属性 这真的让我很困惑 两者有什么区别 以及什么时候使用它 我想添加一些用例ValueChanged and