如何使用Blazor从动态文本框中检索数据

Question

MyCustomControl.razor

<input type="text" id="@id" />
@code {
     [Parameter]
    public string id { get; set; }
}

Test.Razor

@page "/test"

<button @onclick="@addCompoment">add text box</button>
<div class="simple-list-list">
    @if (componentListTest == null)
    {
        <p>You have no items in your list</p>
    }
    else
    {
        <ul>
            @foreach (var item in componentListTest)
            {
                @item<br/>
            }
        </ul>
    }
</div>

@functions {

    private List<RenderFragment> componentListTest { get; set; }
    private int currentCount { get; set; }
    private string TxtExample { get; set; }
    protected  void OnInit()
    {
        currentCount = 0;
        componentListTest = new List<RenderFragment>();
    }


    protected void addCompoment()
    {
        if(componentListTest==null)
        {
        componentListTest = new List<RenderFragment>();
        }
        componentListTest.Add(CreateDynamicComponent(currentCount));
        currentCount++;
    }


    RenderFragment CreateDynamicComponent(int counter) => builder =>
    {

        try
        {
            var seq = 0;
            builder.OpenComponent(seq, typeof(MyCustomControl));
            builder.AddAttribute(++seq, "id", "listed-" + counter);
            builder.CloseComponent();
        }
        catch (Exception ex)
        {

            throw;
        }


    };
}

动态添加文本框后，如何从文本框中检索所有输入数据（单击提交按钮之后。）如何与动态组件进行交互并获取值。MyCustomControl是组件，附加在“测试剃刀”页面中。为这些组件创建诸如bind-value之类的属性，以获取用户提供的输入字段数据]

MyCustomControl.razor @code {[Parameter] public string id {get;组; }} Test.Razor @page“ / test” 添加文本...

Answer 1

根据您应用的总体设计，约束和类似情况，有两种解决方案。以下解决方案很简单。一般来说，它涉及将添加的文本框的值传递给要保存在列表对象中的父组件。父组件具有一个按钮，单击该按钮时将显示文本列表。