Blazor TwoWay在自定义组件上的绑定

问题描述

我正在创建一个blazor服务器端应用程序，在将值绑定到两个自定义组件之间时遇到问题.

I'm creating a blazor server side app and have problems to bind a value between two custom components.

我浏览了有关bind或@bind应该如何工作的另一个示例，但是我无法弄清有关此问题的最新信息.

I've looked through different example of how the bind or @bind is supposed to work but I cannot figure out what up to date information on this matter is.

给出一个模型类用户:

public class User
    {
        [Mapping(ColumnName = "short_id")]
        public string ShortId { get; set; }

        public User()
        {

        }
    }

我想构建一个显示该用户所有属性的表单，并将其输入到输入中，以便可以对其进行编辑并最终将其保存到数据库中.

I want to build a form which displays all properties of this user and has them in an input so it can be edited and in the end saved to a database.

我的表单(父组件)如下:

My Form (parent component) looks like this:

<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是如下所示的自定义组件:

Where AnimatedUserInput is a custom component that looks like this:

<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; }
}

现在在输入"文本框中，我可以在父组件中正确看到User对象的ShortId.

Now in the Input textbox I correctly see the ShortId of the User object in my parent component.

但是，如果我更改输入中的文本并单击Save按钮，该按钮会触发ValidateUserData方法，并允许我查看当前的User对象，那么我发现实际上没有进行任何更改. User.ShortId属性，但仅在输入上.

However if I change the text in the input and click on the Save button which triggers the ValidateUserData method and allows me to look at the current User object I see that no changes have been done in the actual User.ShortId property but only on the input.

是否有任何方法可以绑定它，以便将输入中的更改自动应用于绑定的属性?

Is there any way to bind it so that changes in the input will automatically be applied to the binded property?

我有几种这样的属性，需要以表格的形式显示，这就是为什么我不想为每个属性都挂接到自定义的OnChanged事件.

I have several of these properies which need to be shown in the form which is why I dont want to hook a custom OnChanged Event for each of those properties.

推荐答案

好吧，对于任何对此绊脚石的人来说.我尝试了更多，找到了解决方案.因此，在我的自定义输入组件AnimatedUserInput中，我添加了一个EventCallback，每次输入值更新时都会调用该事件:

Ok so for anyone stumbling upon this. I tried a bit more and found a solution.So to my custom input component AnimatedUserInput I added a EventCallback which I call everytime the value on the input is updated:

@code {

    [Parameter]
    public string TbText
    {
        get => _tbText;
        set
        {
            if (_tbText == value) return;

            _tbText = value;
            TbTextChanged.InvokeAsync(value);
        }
    }

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

    [Parameter]
    public string Placeholder { get; set; }

    private string _tbText;
}

我的父组件上的绑定看起来像这样:

And the binding on my parent component looks like this:

<div class="edit-user-form">
    <AnimatedUserInput @bind-TbText="@User.ShortId" Placeholder="MHTEE Id"/>
    <AnimatedUserInput @bind-TbText="@User.FirstName" Placeholder="First name" />
    <AnimatedUserInput @bind-TbText="@User.LastName" Placeholder="Last name" />
    <AnimatedUserInput @bind-TbText="@User.UserName" Placeholder="Username" />
    <AnimatedUserInput @bind-TbText="@User.StaffType" Placeholder="Staff type" />
    <AnimatedUserInput @bind-TbText="@User.Token" Placeholder="Token" />
    <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; }
}

通过这种方式，blazor可以将值正确绑定在一起，并按照我希望它们绑定的方式从两侧进行更新.

This way blazor can correctly bind the values together and updates them from both sides the way I would expect them to bind.

这篇关于Blazor TwoWay在自定义组件上的绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！