时间戳

首页 > 解决方案 > 如何创建 InputText 组件

razor - 如何创建 InputText 组件

问题描述

我正在尝试创建一个 Input 组件，它可以：

当我需要使用它时，我只需调用它：

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

当我运行应用程序试图使这项工作我有这个错误：

错误：System.InvalidOperationException：Shared_Components.Forms.HyperInput 需要 EditContext 类型的级联参数。例如，您可以在 EditForm 中使用 Shared_Components.Forms.HyperInput。在 Microsoft.AspNetCore.Components.Forms.InputBase 1.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) 在 Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment) 在 Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch( Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue() 处的 RenderQueueEntry renderQueueEntry)

我尝试HyperInput用 EditForm 换行但不起作用。

我希望有人可以帮助我，我需要它。

编辑： 现在，我正在尝试使用一个input元素而不是InputText继承 InputBase。我只补充了：

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);
}

我对这个组件唯一能做的就是用退格键删除。注意：@bind-Value我使用的是@bind-Binder.

标签： razorblazor

解决方案

您可以使用经典的 DOM 事件，例如onkeyup和onmousewheel让您的 HyperInput 工作对您有利。我强烈建议使用 InputText 固有的，因为它使您的组件更加强大。如果您开始使用，我在这里发布的版本。距离完成还很远。

其他组件的使用

EditContext为了展示一个和双向绑定功能中的用法，我创建了一个简单的模型、一个显示元素和一个重置按钮

<EditForm Model="_model">
    <HyperInput @bind-Value="_model.Name" Options="@(new String[]{ "ABC", "DEF","TEST","SOMETHING"})" class="form-control" />
</EditForm>

<span>@_model.Name</span>\
<button @onclick="@(() => _model.Name = "My Testname")" >Reset</button>

@code
{
    public class TestModel
    {
        public String Name { get; set; } = "My test name";
    }

    private TestModel _model = new TestModel();

}

超输入

@inherits InputText

<input type="text" @bind-value="Value" @onkeyup="ClearInput" @onmousewheel="OnMouseWheelUp" @attributes=AdditionalAttributes />

@code {

    [Parameter]
    public IReadOnlyList<String> Options { get; set; }

    private Int32 _index = 0;

    public void ClearInput(KeyboardEventArgs args)
    {
        if(args.Key == "Escape")
        {
            //CurrentValue triggers the update process
            base.CurrentValue = String.Empty;
        }
    }

    public void OnMouseWheelUp(WheelEventArgs args)
    {
        Int32 nextIndex;
        if(args.DeltaY > 0)
        {
            nextIndex = _index + 1;
        }
        else
        {
            nextIndex = _index - 1;

        }

        SuggestInput(nextIndex);
    }

    private void SuggestInput(Int32 requestedIndex)
    {
        if(Options == null || Options.Count == 0) { return;  }

        if(requestedIndex < 0 && Options.Count > 0)
        {
            _index = 0;
            CurrentValue = Options[0];
        }
        else if(requestedIndex < Options.Count)
        {
            _index = requestedIndex;
            CurrentValue = Options[requestedIndex];
        }
    }
}

如果按下了退出按钮，CurrentValue则设置为空字符串并且文本框为空。CurrentValue 将触发更新过程。对于鼠标滚轮，有一个由参数表示的选项列表Options和一个负责记住列表中当前位置的本地字段。

有WheelEventArgs一个属性DeltaY。如果向上滚动，则此值为负数。如果向下滚动，则值为正。

我做了一个简单的“限制器”逻辑。如果您到达列表的边界（向上或向下），则不会再发生任何事情。但是，当然，您可以将其更改为循环缓冲区或任何其他您想到的东西。

推荐阅读