Blazor如何使用绑定(bind)值:event ="oninput" with @oninput ="FooFunc" together

标签 blazor blazor-client-side

我正在使用 Blazor 服务器端。

我有几个输入框绑定(bind)到不同的值,但只要有输入,它们就必须调用相同的函数。该函数本质上启动计时器,用于在 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。在框失去焦点之前,该值不会被绑定(bind)。但计时器会在每次击键时启动。所以我想要的结果是在击键时绑定(bind)值并在击键时启动计时器。

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

我尝试向其中添加 @bind:event="oninput" 。但它提示 oninput 被使用了两次以上。

请记住,我有多个这样的行,其中 bind 绑定(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>
}

最佳答案

我已经找到了问题的解决方案。所以我会为有类似问题的人发帖。我在这里找到了答案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)输入值,@bind-value:event="oninput" 绑定(bind)当我输入时的值。并且 @onkeyup="@Funcname" 将在释放按键时调用我的函数。不太理想,我更希望您可以为诸如 oninput 这样的单一事物拥有多个处理程序。但就我的目的而言,它工作得很好。

关于Blazor如何使用绑定(bind)值:event ="oninput" with @oninput ="FooFunc" together,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61940518/

相关文章:

缺少 Blazor WebAssembly 3.1 目标框架

c# - 如何在 Blazor WebAssembly 中配置具有不同配置的多个 HttpClient 实例

asp.net-core - 找不到类型或命名空间名称 'IWebHostEnvironment'(是否缺少 using 指令或程序集引用?)

c# - 如何查找导致源生成器编译异常的问题?

c# - VS 2017 .Net core 2.2 中缺少 Blazor 模板

.net - Blazor WebAssembly。在布局级别添加授权属性

blazor - 为什么Blazor的index.html或_Host.razor文件中存在<base href ="/"/>?

blazor - 如何在 Blazor 中的单击事件中获取目标元素

c# - 如何将对象属性作为参数传递给 Razor 组件

c# - 如何通过单击按钮将另一个 Razor 组件加载到 Razor 组件中?