Question

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

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时，我发现了输入的值。但是当我提交表单时，该值为null。

如何做到？

Answer 1

引用Blazor docs：

组件参数

绑定可以识别组件参数，其中@ 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提出子组件的绑定更改。

Try it at BlazorFiddle。

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

如何在Blazor组件上进行双向绑定

2 个答案: