主页 / coding / 问题 / 76979736
Accepted
Michael Schreiber
Asked: 2023-08-26 02:27:08 +0800 CST

在输入中输入值后，Blazor 与文本输入的绑定不起作用

  • 772

我的要求是有一个文本输入，用户可以在其中输入文本，但也可以以其他方式设置其值（例如，通过按钮）。我在 blazor 服务器项目中使用 .Net 7。我创建了以下简单的 UI 来重现我在更复杂的构造中遇到的问题： 简单的用户界面

剃须刀代码：

Text Input:
<input type="text" @bind-Value=Value @bind-Value:event="oninput" />
<br />
<button class="btn btn-primary" @onclick="IncrementCounter">Increment Counter and set Value </button>
<br />
Current Value: @Value
<br />
Current Counter Value: @_counter

C# 代码：

@code {
    private int _counter = 1000;

    private string? Value { get; set; }

    private void IncrementCounter()
    {
        _counter++;
        Value = _counter.ToString();
    }
}

当我单击按钮时，文本输入中的值将按预期设置。即，它被设置为计数器的当前值并且计数器递增。当我在文本输入中输入某些内容时，该值会显示在按钮下方（“当前值”）。但是，现在该按钮不再更新文本输入的内容。的纯文本@Value仍然显示该Value属性已按预期设置。从文本输入到Value属性的绑定仍然有效，但反之则不然。任何如何解决这个问题的想法都非常受欢迎。

我试过：

  • INotifyPropertyChanged为财产实施Value。
  • StateHasChanged内调用IncrementCounter()。
  • 致电酒店StateHasChanged内Value。
  • StateHasChanged通过另一个按钮呼叫。
  • 另一个示例，其中文本输入位于Value带有Parameter. 在此示例中，我还实现了一个ValueChanged EventCallback.

什么都没起作用。

抱歉，我当时很绝望。

blazor

2 个回答

  1. Best Answer

    您需要使用@bind-value（小写“v”）或@bind单独使用。

    <input type="text" @bind-value=Value @bind-value:event="oninput" />
<input type="text" @bind=Value @bind:event="oninput" />

    布拉佐小提琴

    • 1

  2. 作为@RBee 答案的补充，您可以取消文本转换代码并直接绑定到计数器。

    当 Razor 编译器将绑定功能构建到生成的 C# 组件类中时，它将在幕后实现必要的转换代码。

    @page "/"

<PageTitle>Index</PageTitle>

<div class="p-2 mb-3">
    <label class="label">
        Counter Input:
    </label>
    <input class="form-control" type="number" @bind="_counter" @bind:event="oninput" />
</div>
<div class="mb-3 text-end">
    <button class="btn btn-primary" @onclick="IncrementCounter">Increment Counter and set Value </button>
</div>

<div class="bg-dark text-white m-2 p-2">
    <pre>Current Counter Value: @_counter</pre>
</div>

@code {
    @code {
        private int _counter = 1000;

        private void IncrementCounter()
        {
            _counter++;
        }
    }
}
    • 0

相关问题