我有 Blazor 页面,我想在其中创建一个待办事项列表,该列表会在按下按钮或用户按 Enter 时更新。我希望“输入”和按钮执行相同的操作(将我在框中输入的内容添加到我的待办事项列表中。现在“输入”有效,但我必须按两次输入。我只想按一次。按钮按预期工作。
<input placeholder="Text Here" type="text" @onkeydown="@Enter" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>
@code {
private string newTodo;
private IList<TodoItem> todos = new List<TodoItem>();
private void AddTodo()
{
// Todo: Add the todo
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem { Title = newTodo });
newTodo = string.Empty;
}
}
public void Enter(KeyboardEventArgs e)
{
if (e.Key == "Enter")
{
// Todo: Add the todo
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem { Title = newTodo });
newTodo = string.Empty;
}
}
}
}
<ul>
@foreach (var todo in todos)
{
<li>
<input type="checkbox" @bind="todo.IsDone" />
<input @bind="todo.Title" />
</li>
}
</ul>
我尝试删除@onkeydown =“@Enter”,但显然除了按钮之外没有任何东西触发
和
if (e.Key == "Enter")
{
AddTodo()
}
我希望后者能够跳过一些需要额外输入的步骤,但这让我在那里双重粘贴了代码。
如果您使用标准 Blazor 表单控件,它将按您的预期工作。
这是一个演示页面:
@page "/"
<PageTitle>Home</PageTitle>
<h1>Demo ToDo</h1>
<EditForm Model="_model" OnValidSubmit="HandleValidSubmit">
<div class="form-group col-md-4 mb-3">
<label>ToDo</label>
<InputText class="form-control" @bind-Value="_model.Value" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</EditForm>
<div class="bg-dark text-white m-2 p-2">
<pre>Value : @_model.Value</pre>
<pre>Message : @_message</pre>
</div>
@code{
private ToDo _model = new();
private string? _message;
private async Task HandleValidSubmit()
{
// Fake some async activity
await Task.Delay(100);
_message = $"Submitted at {DateTime.Now.ToLongTimeString()}";
}
public class ToDo
{
public Guid Uid { get; set; } = Guid.NewGuid();
public string? Value { get; set; }
}
}