样式化 Blazor EditForm 组件 - 专注于 InputText答案

【问题标题】：Styling Blazor EditForm components - focus on InputText样式化 Blazor EditForm 组件 - 专注于 InputText
【发布时间】：2021-03-16 18:53:45
【问题描述】：

我正在学习 Blazor 框架，它有自己的 HTML 元素。我尝试设置 InputText 元素的样式，但它似乎不适用于某些 CSS 属性。例如“焦点”。

我的 CSS：

    input:focus, select:focus, .inputstyle:focus {
        border: 1px solid #ff6801;
    }

HTML Input 可以正常工作，但 InputText 不能。我的代码：

<input type="text" name="address" id="address" />
<InputText class="inputstyle" @bind-Value="@Advert.Title" />

那么我怎样才能把 css Focus 放在 InputText 上呢？

【问题讨论】：

github.com/BrianLParker/OrakTech.Inputs/tree/master/…

标签： html css blazor .net-5

【解决方案1】：

InputText 是 Blazor 组件，因此无法获得输入焦点。但是您可以将焦点设置在其内部输入元素上...您可以执行以下操作：

您可以从 InputText 派生，并使用ElementReference.FocusAsync()

注意：此功能仅在 .Net 5.0 中可用

InputTextSetFocus.razor

@inherits InputText
  
<input @ref="inputElement"
       @attributes="AdditionalAttributes"
       class="@CssClass"
       value="@CurrentValue"
       @oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />

@code {
    private ElementReference inputElement;

    protected override void OnAfterRender(bool firstRender)
    {
         base.OnInitialized();
         inputElement.FocusAsync();
       
    }

   
}

用法

@page "/"

<EditForm Model="employee">
    <InputTextSetFocus @bind-Value="@employee.ID" />
</EditForm>

@code
{
    private Employee employee = new Employee();

    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

【讨论】：