我正在创建一个 blazor 服务器端应用程序,但在两个自定义组件之间绑定值时遇到问题。
我已经查看了 bind 或 @bind 应该如何工作的不同示例,但我无法弄清楚关于这个问题的最新信息是什么。
给定一个模型类用户:
public class User
{
[Mapping(ColumnName = "short_id")]
public string ShortId { get; set; }
public User()
{
}
}
我想构建一个表单,显示该用户的所有属性并将它们放在输入中,以便可以对其进行编辑并最终保存到数据库中。
我的表单(父组件)如下所示:
<div class="edit-user-form">
<AnimatedUserInput TbText="@User.ShortId" Placeholder="MHTEE Id"/>
<button class="btn btn-secondary" @onclick="Hide" style="{display:inline-block;}">Back</button>
<button class="btn btn-primary" @onclick="SaveUser" style="{display:inline-block;}">Save</button>
</div>
@code {
[Parameter] public vUser User { get; set; }
[Parameter] public Action Hide { get; set; }
bool _error = false;
void SaveUser()
{
ValidateUserData();
}
void ValidateUserData()
{
_error = string.IsNullOrWhiteSpace(User.ShortId);
}
}
AnimatedUserInput
如下所示的自定义组件在哪里:
<div class="edit-area @FocusClass @WiggleClass">
<input type="text" @bind="@TbText" />
<span data-placeholder="@Placeholder"></span>
</div>
@code {
[Parameter]
public string TbText { get; set; }
[Parameter]
public string Placeholder { get; set; }
}
现在在输入文本框中,我正确地看到了父组件ShortId
中的User
对象。
但是,如果我更改输入中的文本并单击Save
触发该ValidateUserData
方法并允许我查看当前User
对象的按钮,我会发现实际属性中没有进行任何更改,User.ShortId
而只是在输入中进行了更改。
有什么方法可以绑定它,以便输入中的更改将自动应用于绑定的属性?
我有几个需要在表单中显示的属性,这就是为什么我不想OnChanged
为每个属性挂钩自定义事件。