Blazor按钮事件多次触发

我有一个blazor应用程序,其中一个按钮事件在按下时被触发。问题是每次按下按钮时,事件都会被触发3次。我刚刚注意到,如果我按下Enter键而不是点击按钮,事件只发生一次。(我也不知道为什么…)

这是按钮和一些更多的html,如果需要的话。

    <div class="form-container uk-flex uk-flex-column uk-flex-middle">
        <span class="input-container">
            <input type="text" name="verb" id="form_verb" @bind="searchInput" />
        </span>
        <!-- This is the button -->
        <button type="button" class="uk-button uk-button-secondary" style="width:40%; margin-top:0.25rem;" @onclick="@Search">Lorem ipsum</button>
    </div>
    <h1>@counter</h1>

这就是被触发的事件。

private async Task Search()
{
    counter = counter + 1;
    navigatableSearchInput = searchInput;
    await tablaReconocimientos.SearchVerb(searchInput);
}

这里你有一个例子来说明发生了什么。enter image description here

EDIT_1: 将@onclick事件改为@onclick=”@Search”。同样的行为。

EDIT_2: 增加了按回车的行为。

EDIT_3: 澄清按钮的标记。

解决方案:

正如@Taladan上面提到的,每次页面渲染或更新时都会调用该函数。我只是没有注意到我在这个函数的 OnAfterRender(). 我只是把那部分改成了调用 OnParametersSet() 并且工作得很好。

我有这个。

protected override void OnAfterRender(bool firstRender)
{
    if (searchInput != null) Search();
}

然后就换成了这个

protected override Task OnParametersSetAsync()
{
    if (searchInput != null) Search();
    return base.OnParametersSetAsync();
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

Angular *ng如果没有使用组件方法进行更新

2022-9-9 2:01:16

未分类

使用Javascript进行文摘认证 XMLHttpRequest

2022-9-9 2:01:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索