苗条的按钮功能

Question

我只是在我的代码中更改了一些东西......在这个中，我希望按钮"ENTER"的功能与上面的输入字段相同，但不知道为什么它不起作用：

此按钮代码：

<div class="buttonDate">
<button on:click={newTodoTitle}>Enter</button>
</div>

https://svelte.dev/repl/f137b909d3e740f99a030576189091db?version=3.22.3

Answer 1

在Todos.svelte模板中，newTodoTitle只是一个字符串。on:click={newTodoTitle}应该改为调用函数。特别是，听起来它应该调用您的addTodo函数。不幸的是，addTodo对enter密钥进行了检查。通过一些调整，您应该能够使其正常工作。

1. 为键下创建一个名为submit的新函数：

function submit(event) {
if (event.key === 'Enter') {
addTodo();
}
}

2. 让该函数调用 addTodo 的修改版本：

function addTodo() {
todos = [...todos, {
id: nextId,
completed: false,
title: newTodoTitle,
date: toDoItemDate,
}];
nextId = nextId + 1;
newTodoTitle = '';
toDoItemDate = '';
}

3. 调用 从您的input提交

<input 
type="text" 
class="todo-input" 
placeholder="click a to-do, select target date, and hit enter..." 
bind:value={newTodoTitle} 
on:keydown={submit}>

4. 从button单击调用addTodo

<button on:click={addTodo}>Enter</button>

这是在 REPL 中