从 Blazor 中的 InputBase 继承答案

【问题标题】：Inherit from InputBase in Blazor从 Blazor 中的 InputBase 继承
【发布时间】：2021-02-12 01:52:57
【问题描述】：

我正在创建一个从 InputBase 派生的自定义组件...

到目前为止，这是我的 MyCustomInput.razor 代码：

@inherits InputBase<string>
<input id="@id" @attributes="AdditionalAttributes" class="@CssClass" value="@CurrentValue"

我希望能够使用该组件：

<MyCustomInput @bind-Value="user.Telephone" ...

或者

<MyCustomInput @bind-Value="user.Telephone" @bind-Value:event="oninput" ...

要实现这一点，我应该将什么更改为 MyCustomInput ？

非常感谢您的帮助！

干杯，

拉斐尔

【问题讨论】：

如此简单。真的。两步。您应该将自定义控件绑定到value，如下所示：<input @bind-value="Value" 并覆盖protected override bool TryParseValueFromString。请参阅Option 2 (recomended): Through inheritance from InputBase 部分。
非常感谢，我会试试这个！！！

标签： c# blazor

【解决方案1】：

您可以将组件嵌套在其他组件中。有关如何执行此操作的示例，请参阅 this answer。

【讨论】：

【解决方案2】：

MyCustomInput.razor

@inherits Microsoft.AspNetCore.Components.Forms.InputText
<input @attributes="@AdditionalAttributes" @bind="@CurrentValueAsString" @bind:event="oninput" />

用法：

<MyCustomInput @bind-Value="user.Telephone" class="@CssClass" id="@id" />

无需使用字符串覆盖TryParseValueFromString。 html 属性id 和class 将通过喷溅传递@attributes="@AdditionalAttributes

【讨论】：