MMiooiMM

昨天講解了父子元件溝通問題，而今天我們的目標是透過介紹內建輸入元件時提到的 InputBase<TValue> 來建立客製化輸入元件。

---

元件只需要繼承 InputBase<TValue> 即可，如：

@inherits InputBase<string>

這樣一來，我們的元件就能夠使用 InputBase<TValue> 的所有成員了。

• 屬性成員

名稱	類別	用途
AdditionalAttributes	IReadOnlyDictionary<string, object>	用來設定或取得額外屬性，搭配 @attributes 來使用。
Value	TValue	用於設定或取得值，需與雙向綁定一起使用
ValueChanged	EventCallback<TValue>	用於設定或取得綁定值的回呼
ValueExpression	Expression<Func<TValue>>	用於設定或取得綁定值的表達式
EditContext	EditContext	用於取得關聯的 EditContext
FieldIdentifier	FieldIdentifier	用於取的綁定值的 FieldIdentifier(也就是 Model 與 FieldName)
CurrentValue	TValue	用於設定或取得當前的值
CurrentValueAsString	string	用於設定或取得當前的值，以 FormatValueAsString 傳回的字串表示。
CssClass	string	用於取得外部給元件的 CssClass。

• 方法成員

名稱	傳回值	用途
FormatValueAsString(TValue value)	string	將 TValue 值格式化成字串
TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)	bool	用於解析輸入的內容，並轉換成特定字串；當解析失敗時，能提供錯誤訊息。

而這邊簡單的做一個輸入框，只要是輸入英文，input 事件發生後都會被強制轉換成大寫：

@inherits InputBase<string>

<input @attributes="AdditionalAttributes"
       class="@CssClass"
       @bind="CurrentValueAsString" />
@code {
  protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
  {
    var valid = !string.IsNullOrEmpty(value);
    result = valid ? value.ToUpper() : null;
    validationErrorMessage = valid ? "" : "Invalid Value";
    return valid;
  }
}

使用時就像內建的輸入元件一樣，只能在 EditForm 中使用，要注意的一點是 TryParseValueFromString 方法是抽象的，所以我們只必須要自己實作解析方法即可。

---

以上就是客製化輸入元件的方法，透過繼承 InputBase<TValue> 就可以簡單辦到，但如果只是想在 InputText 中添加內容，也是可以直接繼承 InputText 與其它的內建輸入元件唷。

感謝大家的閱讀，先祝大家中秋節快樂，我們明天見。

參考資料
以輸入事件為基礎的 InputText