Blazor InputText触发器函数带有Enter按钮

Question

<EditForm class="form-inline col-md-12 p-3" Model="searcher" OnValidSubmit="OnSearchSubmit">
<input class="form-control w-100 mr-3"
type="text"
@bind-value="searcher.SearchText"
@onkeypress="KeyHandler"
placeholder="Enter employee name to filter" />
<ValidationMessage For="()=> searcher.SearchText" />
<div class="mx-auto mt-2">
<button type="submit" class="btn btn-primary mr-3">Search</button>
<button class="btn btn-primary " @onclick="ShowEmployeeList" @onclick:stopPropagation="true">Reset</button>
</div>
</EditForm>
//Function
private async Task KeyHandler(KeyboardEventArgs e)
{
if (e.Key == "Enter")
{
await OnSearchSubmit();
}
}

当我按下InputText框中的Enter键时，我正试图运行一个函数，但到目前为止，我观察到的行为是按下Enter键时激发EditForm中的第一个button元素。这方面有什么办法吗？

Answer 1

此处的按钮类型为"submit"，因此默认情况下它会提交表单并触发"OnSearchSubmit"函数。为了避免这种情况，您可以将按钮类型更改为"button"。

我希望它能有所帮助！