svelte 中的按钮功能答案

【问题标题】：Button function in sveltesvelte 中的按钮功能
【发布时间】：2020-09-09 07:10:33
【问题描述】：

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

此按钮代码：

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

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

【问题讨论】：

标签： javascript mobile web-applications desktop-application svelte

【解决方案1】：

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

为您的 keydown 创建一个名为 submit 的新函数：

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

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

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

从您的input 致电提交

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

点击button 拨打addTodo

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

这里是REPL

【讨论】：