Question

在Blazor中，使用输入时，

<input bind-value="@InputValue" bind-value:event="oninput"/>

这将创建一种2方式绑定，该绑定会随着oninput事件更新。

我想在具有自定义事件和自定义属性的自定义组件上重新创建它。

CustomInput.razor

<input value="@Value" oninput="@OnInput" />

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

   [Parameter]
   public EventCallback<ChangeEventArgs> OnInput { get; set; }
}

我希望能够以这种方式使用它。

<CustomInput bind-Value="@InputValue" bind-Value:event="OnInput" />

现在在Blazor上有可能吗？如果是，我该如何实现？

Answer 1

是的 Blazor 支持 2 路绑定。它与 EventCallbacks（必须被触发）一起使用，并且默认使用基于名称约定的事件，例如：{PropertyName}Changed。您也可以覆盖此命名约定 @bind-{Prop}:event="{EventCallbackName}"。在您的代码示例中，您只是覆盖了这个默认事件名称，从不触发它。

在您的代码中有两个问题：

您必须定义以 @ 开头的绑定，并且在 "" 内没有必要使用 @ 更正为：@bind-{PropertyName}="{variable}"。

将您的代码更改为：<CustomInput @bind-Value="InputValue" @bind-Value:event="OnInput" />

已经写道，当实际值发生变化时，必须触发这些事件。将您的代码更新为：

private string _value;
[Parameter] public string Value 
{ 
   get => _value; 
   set
   {
      if(value == _value)
        return;

      _value = value;  
      if(OnInput.HasDelegate)
      {
         OnInput.InvokeAsync(_value);
      }  
   }
}

Answer 2

事件参数必须称为ValueChanged

<input value="@Value" @oninput="ValueChanged" />

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

   [Parameter]
   public EventCallback<ChangeEventArgs> ValueChanged { get; set; }
}

阅读Data binding段落组件参数

如何在自定义组件Blazor上使用bind-value和bind-value：event

2 个答案: