c# - Blazor select-like 组件不更新数据源中的值
问题描述
在我的 Blazor Webassembly(客户端)3.2.0 应用程序中,我select
在页面上有很多以下元素,它们创建了一个组合框,列出了可用的项目enum
:
<select @bind="SomeEnumValue">
@foreach (var element in Enum.GetValues(typeof(SomeEnum)))
{
<option value="@element">@element</option>
}
</select>
虽然这可行,但我想防止对每个这样的组合框一遍又一遍地重复自己,并考虑创建以下EnumSelect
组件:
@typeparam T
<select @bind="Value">
@foreach (var element in Enum.GetValues(typeof(@T)))
{
<option value="@element">@element</option>
}
</select>
@code {
[Parameter]
public T Value { get; set; } = default(T)!;
[Parameter]
public EventCallback<T> ValueChanged { get; set; }
}
然后像这样使用它:
<EnumSelect T="SomeEnum" @bind-Value="SomeEnumValue" />
但是,虽然SomeEnumValue
属性和枚举项的显示有效,但在从组合框中选择另一个项时不会写回该属性。
我不确定为什么这不起作用。我有点怀疑EnumSelect
组件存储了它自己的该值的副本,而不是写回它,但我认为绑定为我解决了这个问题。
有什么(更简单的)方法可以让这个组合框组件工作吗?我的错误在哪里(在理解绑定方面)?
解决方案
通过稍微改写我的问题找到我的答案(抱歉,尚未习惯所有 Blazor 术语):自定义组件上的 Blazor TwoWay Binding
如果遇到我的问题,最终的工作组件如下所示:检查属性内的值是否实际更改是必需的,或者我挂起我的应用程序(可能是因为它想一遍又一遍地设置它?):
@typeparam T
<select @bind="Value">
@foreach (var element in Enum.GetValues(typeof(@T)))
{
<option value="@element">@element</option>
}
</select>
@code {
private T _value = default(T)!;
[Parameter]
public T Value
{
get => _value;
set
{
if (_value.Equals(value))
return;
_value = value;
ValueChanged.InvokeAsync(_value);
}
}
[Parameter]
public EventCallback<T> ValueChanged { get; set; }
}
推荐阅读
- css - 在scss中生成一个网格列,最后带有媒体断点粒子
- laravel - 通过 api 发送的 vuejs 表单数据在 laravel 控制器上不可见
- python - 读写列表,Python Pickle
- atom-editor - Atom 在 Wayland 上的 Ubuntu 上不起作用
- signalr - ng2-signalr 在前进和前进时冻结网站
- javascript - 访问 Angular Material 表中的输入字段
- angular - Angular 5 ParamMap 不适用于 app.component.ts
- python - Python 语音识别 recorder.listen(audio) 几秒钟后停止
- php - 由于查询,人们在聊天页面上显示了两次
- android - 使用 Gson 反序列化数据时将 LinkedTreeMap 转换为 List