如何在自定義組件 Blazor 上使用綁定值和綁定值：事件

在 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的輸入中，那麼您可以使用這種格式。

是的 Blazor 支持 2 路綁定。它與 EventCallbacks （必須觸發）一起使用，預設使用基於名稱約定的事件，例如：{PropertyName}Changed. 您也可以覆蓋此命名約定@bind-{Prop}:event="{EventCallbackName}"。在您的程式碼範例中，您只是覆蓋了這個預設事件名稱，而不是觸發它。

在您的程式碼中，您有兩個問題：

1. 您必須定義 bind 開頭@和內部""沒有必要使用@正確的 is: @bind-{PropertyName}="{variable}"。

將您的程式碼更改為：<CustomInput @bind-Value="InputValue" @bind-Value:event="OnInput" />

2. 已經寫過這些事件必須在實際值發生變化時觸發。將您的程式碼更新為：

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

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

必須呼叫事件參數ValueChanged

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

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

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

讀取與組件參數的綁定

引用自：https://stackoverflow.com/questions/58988952