如何在 blazer 中使用文本框组件中的值?

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="";
}

很抱歉我的额外文本，但 StackOverflow 需要更多详细信息，但这是我对代码的唯一问题

。 谢谢。

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，将 change 事件绑定到OnChange然后调用ValueChanged。

还有一个测试页面：

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

@bind-Value告诉 Razor 预编译器绑定到Value以设置值，并ValueChanged更新绑定字段/属性。