如何在自定义组件 Blazor 上使用绑定值和绑定值：事件答案

【问题标题】：How to use bind-value and bind-value:event on a custom component Blazor如何在自定义组件 Blazor 上使用绑定值和绑定值：事件
【发布时间】：2020-03-18 05:07:43
【问题描述】：

在 Blazor 中，使用输入时，

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

这将创建一个随 oninput 事件更新的 2 路绑定。

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

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 上实现吗？如果是，我该如何实现？

编辑：

对于遇到此问题的任何人，它似乎都可以正常工作。我不确定是否在提出问题后添加了该功能，或者它是否总是以这种方式工作，但上面的代码应该按原样工作。按照惯例，您的事件名称应为 ValueChanged，但如果您有理由使用另一个事件名称，例如在具有 OnInput 和 OnChange 的输入中，那么你可以使用这种格式。

【问题讨论】：

How to make two-way binding on Blazor component的可能重复

标签： asp.net-core blazor blazor-server-side

【解决方案1】：

必须调用事件参数ValueChanged

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

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

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

阅读Binding with component parameters

【讨论】：

我觉得应该是oninput="@ValueChanged" ?
相关：stackoverflow.com/questions/57932850/…
@daniherrera 我标记的问题有重复
@agua，我发布了相关信息，因为我猜是这样，但我不确定它是否完全相同。对我来说你的答案是对的。要我删除相关评论吗？
另外，这是一个相关的问题，但不一样。相关问题询问 2-way binding，而 this 询问 2-way binding 与不遵循命名约定的事件名称。

【解决方案2】：

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

您的代码中有 2 个问题：

您必须定义以@ 开头的绑定，并且在"" 内部不必使用@，正确的是：@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);
      }  
   }
}

【讨论】：