我如何使用 blazor 中文本框组件的值？

Question

我正在尝试创建一个文本框组件来回收代码，但我无法从页面中的文本框获取值。我只需要从组件中获取 TextBox 值即可将其用于其他页面。

这是文本框组件：

<style>
    .textbox-parameters{
        background: Red;
    }
</style>

    @if (!string.IsNullOrWhiteSpace(Label))
    {
        <label for="@Id">@Label</label>
    }
    <div class="input-group mb-3 " >
        <input type="text" class="form-control textbox-parameters" id="@Id"  @bind="@CurrentValue">
    </div>

@code {
    [Parameter] public string? Label { get; set; }
    [Parameter] public string? Id { get; set; }
    private string CurrentValue {get;set;} = "";
}

我正在尝试在那里使用：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm">
            <label >Proyecto:</label>
            <div class="input-group mb-3">
              <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
            </div>
        </div>
        <div class="col-sm">
                <p class="rcorners2">Lista modelos</p>
        </div>
        <div class="col-sm">
                <p class="rcorners2">Lista Iteraciónes</p>
        </div>
        <div class="col-sm">
                <p class="rcorners2">Imagen Semilla</p>
        </div>
        <div class="col-sm ">
            <div class="row">
                <div class="col-sm">
                    <label>Ancho</label>
                    <div class="input-group mb-3">
                      <div class="input-group-prepend"></div>
                      <input type="text" class="form-control textbox-parameters" id="basic-url" aria-describedby="basic-addon3">
                    </div>
                </div>
                <div class="col-sm">
                    <TextBox Id="Alto" Label="Alto" CurrentValue="@alto" />
                </div>
                <label>Texto: @alto</label>
            </div>
        <div class="row">
            <div class="col-sm text-center">
                <label>Numero Imágenes</label>
                <div class="input-group mb-3 " >
                  <input type="text" class="form-control textbox-parameters" id="basic-url" aria-describedby="basic-addon3">
                </div>
            </div>
        </div>

        </div>

        <div class="col-sm">
           <button type="button" class="btn btn-outline-success">Generar</button>
        </div>
    </div>
</div>


@code{
    string alto="";

}

抱歉我的额外文字，但 Whosebug 需要更多详细信息，但这是我的代码唯一的问题。谢谢。

Answer 1

您需要正确设置绑定 - 即在组件上设置 Value 和 ValueChanged 参数。

这里是TextBox：

<style>
    .textbox-parameters{
        background: Red;
    }
</style>

    @if (!string.IsNullOrWhiteSpace(Label))
    {
        <label for="@Id">@Label</label>
    }
    <div class="input-group mb-3 " >
        <input type="text" class="form-control textbox-parameters" id="@Id" value="@Value" @onchange="this.OnChange">
    </div>

@code {
    [Parameter] public string Value {get;set;} = "";
    [Parameter] public EventCallback<string> ValueChanged {get;set;}

    [Parameter] public string? Label { get; set; }
    [Parameter] public string? Id { get; set; }

    private void OnChange(ChangeEventArgs e)
    {
        ValueChanged.InvokeAsync(e.Value.ToString());
    }
}

请注意，我们已将值绑定到 Value 并将更改事件绑定到 OnChange，然后调用 ValueChanged.

还有一个测试页：

@page "/"
<TextBox @bind-Value="@this.Value" />

<div>
    Value = @this.Value
</div>
@code {
    private string Value { get; set; } = "Fred";
}

@bind-Value 告诉 Razor pre-compiler 绑定到 Value 以设置值并 ValueChanged 更新绑定 field/property.

我如何使用 blazor 中文本框组件的值？

How can i use the value from a textbox component in blazor?

razor

blazor