Blazor 如何将绑定值:event="oninput" 与@oninput="FooFunc" 一起使用

Question

我正在使用 Blazor 服务器端。

我有几个绑定到不同值的输入框，但只要有输入，它们就必须调用相同的函数。该函数本质上是启动定时器，用于在经过 X 时间后保存数据。

Summary: <input class="summary-input @Utilities.SummaryWarning" type="text" @ref="Utilities.CreateSummaryRef" placeholder="Describe summary of an issue." @bind="Utilities.CurrentlyViewedProblem.SummaryText" @oninput="RestartSaveTimer">

我的问题是，使用这段代码，输入框的行为不像 oninput，而是更像 onchange。在框失去焦点之前，该值不会被绑定。但是每次击键都会启动计时器。所以我想要的结果是在击键时绑定值并在击键时启动计时器。

我能想到的唯一方法是为每个将手动更新值的框制作单独的 RestartSaveTimer 方法，但在我的情况下，这是不希望的，因为输入框是根据数据大小动态填充的。

我尝试添加 @bind:event="oninput" 到它。但它抱怨 oninput 被使用了两次或更多次。

请记住，我有多个这样的行，其中 bind 绑定到不同的属性，但它们都必须调用相同的 RestartSaveTimer

编辑

因此其他方框由 for 循环填充

@foreach (Solution solution in Utilities.CurrentlyViewedProblem.SolutionsList)
{
    <div class= "solution">
        <textarea class="solution-input" placeholder="Describe solution to an issue." @bind="solution.SolutionText" @oninput="((ChangeEventArgs e) => CheckSolutionRestartTimer(e, solution))"></textarea>
        <div class="vote">
            <button class="vote-button" @onclick="@(() => IncrementVote(solution))"></button>
            <div class="vote-label">@solution.Votes</div>
        </div>
    </div>
    <div class="date-box-solution">
        <div class="date-created"> Created on: @solution.Created.ToLocalTime()</div>
        <div class="date-modified"> Last Modified On: @solution.LastModified.ToLocalTime()</div>
    </div>
}

Answer 1

我找到了解决问题的方法。所以我会 post 为遇到类似问题的任何人。我在这里 https://github.com/dotnet/aspnetcore/issues/11178

找到了答案

解决方案是使用不同的处理程序。

<input class="summary-input @Utilities.SummaryWarning" type="text" @ref="Utilities.CreateSummaryRef" placeholder="Describe summary of an issue." @bind-value="Utilities.CurrentlyViewedProblem.SummaryText" @bind-value:event="oninput" @onkeyup="@RestartSaveTimer">

如您所见，我在输入时使用 @bind-value="ValueName" 绑定值，@bind-value:event="oninput" 在输入时绑定值。 @onkeyup="@Funcname" 将在释放键时调用我的函数。不太理想，如果您可以为 oninput 这样的单个事物设置多个处理程序，我会更愿意。但就我的目的而言，它工作得很好。

Blazor 如何将绑定值:event="oninput" 与@oninput="FooFunc" 一起使用

Blazor how to use bind-value:event="oninput" with @oninput="FooFunc" together

blazor

blazor-client-side