【问题标题】：How to make two-way binding on Blazor component如何在 Blazor 组件上进行双向绑定
【发布时间】：2020-01-15 20:59:03
【问题描述】：

我想创建自定义输入，所以我创建了这个组件：

MyInputComponent.razor:

<div>
  <input type="text" @bind="BindingValue" />
</div>

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

然后是用法：

<EditForm Model="model" OnValidSubmit="Submit">
    <MyInputComponent BindingValue="model.Name" />
</EditForm>

@code {
    User model = new User() { Name = "My Name" };

    private void Submit()
    {
       // here I found model.Name = null;
   }
}

当我调试MyInputComponent 时，我找到了我输入的值。但是当我提交表单时，该值为空。

缺少什么？

【问题讨论】：

标签： c# blazor

【解决方案1】：

快速解答

引用Blazor docs:

组件参数

Binding 识别组件参数，其中@bind-{property} 可以跨组件绑定一个属性值。

对于您的页面：

<EditForm Model="model" OnValidSubmit="Submit">
    <MyInputComponent @bind-BindingValue="model.Name" />
</EditForm>

子组件MyInputComponent:

<div>
  <InputText type="text" @bind-Value="@BindingValue" />
</div>

@code {

    private string _value;

    [Parameter]
    public string BindingValue
    {
        get => _value;
        set
        {
            if (_value == value ) return;
            _value = value;
            BindingValueChanged.InvokeAsync(value);
        }
    }

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

}

通知

您应该通过EventCallback<string> BindingValueChanged 提高子组件的绑定更改。
我选择了BindingValue 和BindingValueChanged 作为标识符，但是，您可以只使用Value 和ValueChanged。然后将是：<MyInputComponent @bind-Value="model.Name" />

Try it at BlazorFiddle.

（2022 年编辑）现已完整记录在：Binding with component parameters

已编辑：请参阅下面的选项 2 以获得干净的解决方案：

EditForm 中的控件

如果您想将组件放入 EditForm 并处理验证，或使用 onchange 事件执行其他操作，您应该引发 EditContext.NotifyFieldChanged。您有两种选择。

选项 1：从 EditContext 提升

您可以从CascadeParameter 获取EditContext 并手动调用NotifyFieldChanged：

    [CascadingParameter] EditContext EditContext { get; set; } = default!;
    [Parameter] public Expression<Func<string>>? ValueExpression { get; set; }
    #endregion

    #region bindedValue
    [Parameter] public EventCallback<string> ValueChanged { get; set; }
    private string _value { set; get; } = "";
    [Parameter]
    public string Value
    {
        get => _value;
        set
        {
            if (_value == value) return;
            _value = value;
            ValueChanged.InvokeAsync(value);
            var fieldIdentifier = FieldIdentifier.Create(ValueExpression);
            EditContext.NotifyFieldChanged(fieldIdentifier);

        }
    }

选项 2（推荐）：通过从 InputBase 继承

您可以从InputBase<string> 继承并实现TryParseValueFromString。 InputBase 将为您完成工作，当您从 InputBase 继承时，您将拥有 Value、ValueChanged、EditContext 等。

protected override bool TryParseValueFromString(string? value, out string result, [NotNullWhen(false)] out string? validationErrorMessage)
{
    result = value ?? "";
    validationErrorMessage = null;
    return true;
}

【讨论】：

dani，如果您选择使用内置的 InputText 组件提供解决方案，那么为什么不建议从 InputText 组件本身派生的类继承。它更简单，需要更少的代码，并允许您随意控制输入 Html 标记的呈现，例如，为密码创建自定义组件。更好的是，为什么不建议 OP 直接在 EditForm 中使用 InputText 组件...good day.
@Issac，因为问题是如何在 Blazor 组件上进行双向绑定
是的……但这不是一个关于如何在没有上下文的情况下执行此操作的一般问题：您必须考虑用户使用的代码，例如，MyInputComponent 组件使用Html 输入标签。您的解决方案不使用它。相反，您使用内置的 TextInput 组件，因此我的评论建议如果您采用这种方式，则直接使用内置组件。
感谢 dani，这让我解决了绑定自定义组件的问题！ @Isaac，如果您有机会发布它，我很乐意看到您的建议的替代答案！

【解决方案2】：

一般来说，接受的答案是正确的并且工作正常。唯一要添加的是代码示例使用基于事件的默认名称约定，例如：{PropertyName}Changed。

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

但是您可以覆盖此命名约定 @bind-{Property}:event="{EventCallbackName}"

<MyInputComponent @bind-BindingValue="model.Name" @bind-BindingValue:event="OnValueChanged"/>

.....

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

【讨论】：