Blazor —— 在組件中定義雙向綁定

前言

內置的 Input 控件是一個雙向綁定控件，我們使用 @bind-Value 就可以對文本框的 Value 進行雙向綁定的實現。那我們可以自定義這種雙向綁定組件嗎？當然可以。

示例場景

很簡單的需求，當點擊按鈕後，顯示選擇的水果名稱。

這個是水果按鈕組的代碼：

<div class="btn-group">
    @foreach (var item in Fruits)
    {
        <button class="btn @(ActiveButton(item))" @onclick="e=>NameChanged.InvokeAsync(item)">@item</button>
    }
</div>
@code{
    List<string> Fruits = new List<string>
	{
        "蘋果","香蕉","菠蘿"
    };

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

    string ActiveButton(string name)
    => Name == name ? "btn-primary active" : "btn-outline-primary ";
}

這裏是雙向綁定代碼：

<FruitsRadio @bind-Name="FruitName"/>
<strong>
    你選擇是：@FruitName
</strong>

@code{
    string FruitName { get; set; }
}

我們在調用這個組件的時候用到了 bind-Name 的雙向綁定，和之前的 InputText 組件的 bind-Value 有點像，這是怎麼實現的呢？

答疑

FruitRadio 組件

ActiveButton 是一個方法，就是點擊的時候更換樣式，這個很容易理解。

重點在兩個對外公佈的參數 Name 和 NameChanged 上。如果要做雙向綁定，需要符合以下格式：

[Parameter]
public [DataType] [PropertyName] { get; set; }

[Parameter]
public EventCallback<[DataType]> [PropertyName]Changed { get; set;}

就比如上面的例子，雙向綁定參數是 Name ， 數據類型是 string，因此就需要再定義一個 NameChanged 的 EventCallback<string> 的事件。

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

最後，觸發按鈕點擊事件 onclick，然後觸發了 NameChanged 事件，傳入改變後的值，內部機制就會將新值覆蓋到 Name 參數上。

調用組件

在調用組件時，使用 @bind-[PropertyName]，而 VS 的 IDE 會給你提示的

然後綁定到你的一個接收的屬性或變量上，在輸出即可。

總結

給組件定義符合以下規範的兩個參數，就可以對這個屬性進行雙向綁定操作：

[Parameter]
public [DataType] [PropertyName] { get; set; }

[Parameter]
public EventCallback<[DataType]> [PropertyName]Changed { get; set;}

你學會了嗎？