svelte中的按钮功能

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. 从您的addTodo单击中调用button

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

这里是REPL