我刚刚在我的Blazor应用程序中创建了一个小搜索框,它正在做一些意想不到的事情,我无法在项目中看到问题可能在哪里。
下面是搜索框的信息日志。
[10:59:48 INF] [Shared\SearchBox.razor:Enter()] Search for null completed
[10:59:50 INF] [Shared\SearchBox.razor:Enter()] Search for Test completed
[10:59:54 INF] [Shared\SearchBox.razor:Enter()] Search for Test completed
[10:59:59 INF] [Shared\SearchBox.razor:Enter()] Search for completed
字符串
我为此经历的过程是最初输入Test
。第一次输入Test
的日志没有搜索,而是导致null
。第二次我在搜索框中输入Test
,它返回了相应的项目。
现在搜索已经完成了,我清除了搜索框,然后按回车键再次获得完整的列表。第一次我按回车键时,搜索框是空的(第三个日志),控制台记录我再次搜索Test
。我不得不第二次按回车键搜索一个空框,结果是完整的列表。
这看起来像是一个输入验证问题,但我没有看到这个问题在项目中的位置。
SearchBox.razor:
@typeparam TEntity
@using Serilog
<input class="form-control" style="max-width:600px" placeholder="Search..." @onkeydown="@Enter" @bind="searchItem" />
@code {
[Parameter]
public List<TEntity> Items { get; set; }
[Parameter]
public EventCallback<string> OnSearch { get; set; }
private string? searchItem;
private async Task OnSearchClicked()
{
await OnSearch.InvokeAsync(searchItem);
}
public async Task Enter(KeyboardEventArgs e)
{
if (e.Code == "Enter" || e.Code == "NumpadEnter")
{
Log.Information("[Shared\\SearchBox.razor:Enter()] Search for {@searchItem} completed", searchItem);
await OnSearch.InvokeAsync(searchItem);
}
}
}
型
Licenses.razor(可访问搜索框的位置):
@page "/licenses"
@using static HuntressAPI
<h3>Licenses</h3>
<p>Shows the current licensing count of the services</p>
<div class="w-100">
<SearchBox Items="@Organizations" OnSearch="UpdateFilteredOrganizations"></SearchBox>
</div>
<table class="table">
<thead>
<tr>
<th>Site Name</th>
<th>Huntress</th>
</tr>
</thead>
<tbody>
@if (Organizations != null)
{
@foreach (var organization in _filteredOrganizations.OrderBy(a => a.Name))
{
<tr>
<td>@organization.Name</td>
<td>@organization.agents_count</td>
<!-- Add other columns as needed -->
</tr>
}
}
</tbody>
</table>
@inject HuntressAPI HuntressAPI
@code {
private List<Organization>? Organizations { get; set; }
private List<Organization> _filteredOrganizations { get; set; }
protected override async Task OnInitializedAsync()
{
Organizations = await HuntressAPI.Huntress();
_filteredOrganizations = Organizations.ToList();
}
void UpdateFilteredOrganizations(string searchTerm)
{
if (string.IsNullOrEmpty(searchTerm))
{
_filteredOrganizations = Organizations.ToList();
}
else
{
_filteredOrganizations = Organizations
.Where(org => org.Name.Contains(searchTerm, StringComparison.OrdinalIgnoreCase))
.ToList();
}
}
}
型
1条答案
按热度按时间ljsrvy3e1#
问题是@onkeydown在值实际更改之前执行。您可以尝试这样做:
字符串