3：表单和事件

所有应用程序都需要允许用户对存储的数据执行某种类型的交互。在我们的例子中，我们需要的第一种交互类型是新任务。没有它，我们的待办事项应用程序将毫无用处。

用户在网站上插入或编辑数据的主要方法之一是通过表单。在大多数情况下，使用<form>标签是一个好主意，因为它为其中的元素赋予了语义含义。

3.1：创建任务表单

首先，我们需要创建一个简单的表单组件来封装我们的逻辑。

在一个名为TaskForm.svelte的文件中创建一个form元素，并添加一个输入字段和一个按钮

imports/ui/TaskForm.svelte

<form class="task-form">
    <input type="text" name="text" placeholder="Type to add new tasks" />
    <button type="submit">Add Task</button>
</form>

3.2：更新应用程序

然后，我们可以简单地将这个新表单添加到我们的App.svelte组件中，首先在<script/>标签中导入它，然后在我们的<div />中使用它

imports/ui/App.svelte

<script>
    import { TasksCollection } from '../api/TasksCollection';
    import Task from './Task.svelte';
    import TaskForm from './TaskForm.svelte';
    ..
</script>


<div class="container">
    <header>
        <h1>Todo List</h1>
    </header>

    <TaskForm />
    
    ..
    
</div>

3.3：更新样式表

你也可以根据自己的意愿对其进行样式设置。目前，我们只需要在顶部添加一些边距，这样表单就不会显得偏离中心。添加CSS类.task-form，这需要与表单组件中class属性中的名称相同。

client/main.css

.task-form {
  margin-top: 1rem;
}

3.4：添加提交监听器

现在我们需要向表单上的submit事件添加一个监听器，并创建handleSubmit函数，该函数实际上将插入我们的任务

imports/ui/TaskForm.svelte

<script>
    import { TasksCollection } from '../api/TasksCollection';

    let newTask = '';

    const handleSubmit = () => {
        // Insert a task into the collection
        TasksCollection.insert({
            text: newTask,
            createdAt: new Date(), // current time
        });

        // Clear form
        newTask = '';
    }
</script>

<form class="task-form" on:submit|preventDefault={handleSubmit}>
    <input
            type="text"
            name="text"
            placeholder="Type to add new tasks"
            bind:value={newTask}
    />
    <button type="submit">Add Task</button>
</form>

此表单的输入标签将添加一个bind:value属性，这将把输入的值绑定到newTask属性。

接下来，handleSubmit方法将添加到App组件的脚本部分。为了在表单的提交事件上执行handleSubmit函数，我们将向表单标签添加on:submit|preventDefault属性

此外，在你的task文档中插入一个日期createdAt，以便你了解每个任务的创建时间。

3.5：首先显示最新的任务

现在剩下的就是做最后一个更改：我们需要首先显示最新的任务。我们可以通过对我们的Mongo查询进行排序来快速实现这一点。

imports/ui/App.svelte

<script>
  ..
  $m: tasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch()
</script>
..

现在你的应用程序应该如下所示

回顾：你可以查看你的代码在这一步结束时应该是什么样子这里

在下一步中，我们将更新你的任务状态，并为用户提供删除任务的方法。