How to create a InputText Component

I'm trying to create a Input component that can:

• Clear its value when press Escape.

• On mousewheel change its value. I'm creating a Input component cause i dont wanna put the same code in all Inputs elements and i need to administrate all from the same site. I have 6 days with dis issue. I'm reading and searching information that i could use but nothing help me at 100%.

   @inherits Microsoft.AspNetCore.Components.Forms.InputBase<string>   @using Microsoft.AspNetCore.Components.Forms     @if (ReadOnly)   {     <InputText type="text"               tabindex="@TabIndex"              class="@Class"              id="@Id"              style="@Style"              maxlength="@MaxLength"              min="@Min"              max="@Max"              placeholder="@Placeholder"              readonly />  }  else  {     <InputText type="text"              maxlength="@MaxLength"              min="@Min"              max="@Max"              class="@Class"              tabindex="@TabIndex"              id="@Id"              style="@Style"              placeholder="@Placeholder"               @attributes="@AdditionalAttributes"              @bind-Value="@Value"              @bind-Value:event="oninput"              @onkeydown="@(e => { if (e.Code == "Escape") Value = Clear(); StateHasChanged(); })"              @onmousewheel="CaptureScroll"              />  }        @code{  [Parameter]  public string Type { get; set; }  [Parameter]  public string Class { get; set; }  [Parameter]  public string Placeholder { get; set; }  [Parameter]  public string Id { get; set; }  [Parameter]  public string Style { get; set; }  [Parameter]  public bool ReadOnly { get; set; }  [Parameter]  public int MaxLength { get; set; }  [Parameter]  public int Min { get; set; }  [Parameter]  public int Max { get; set; }  [Parameter]  public int TabIndex { get; set; }  }  

When i need to use it i just call it:

<HyperInput Type="text" Class="form-control" Id="inputName" TabIndex="1" @bind-Value="model.ModelName" />.

When i run the application trying to make this work i have this error:

Error: System.InvalidOperationException: Shared_Components.Forms.HyperInput requires a cascading parameter of type EditContext. For example, you can use Shared_Components.Forms.HyperInput inside an EditForm. at Microsoft.AspNetCore.Components.Forms.InputBase1.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange1 oldTree, ArrayRange`1 newTree) at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment) at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry) at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

I tried wrap HyperInput with a EditForm and not work.

I wish that someone could help me, i need it.

EDIT: Now, i'm trying with a input element instead InputText and without inherit InputBase. I only added:

private string _binder;  [Parameter]  public string Binder  {      get => _binder;      set => Set(value);  }  [ParameterAttribute] public EventCallback<string> BinderChanged { get; set; }  public async void Set(string value)  {      _binder = value;      await BinderChanged.InvokeAsync(value);  }  

The only thing that i can do with this component is delete with Backspace. NOTE: Instead of use @bind-Value i'm using @bind-Binder.

https://stackoverflow.com/questions/65728425/how-to-create-a-inputtext-component January 15, 2021 at 07:32AM