1. 添加待办事项

到目前为止，我们列表中的待办事项是硬编码的。让我们通过允许用户添加来使其更有用 列表的待办事项。

删除组件中的硬编码值：<code>TodoList

this.todos = useState([]);

在任务列表上方添加一个输入，占位符为“输入新任务”。

在事件上添加事件处理程序 叫。keyupaddTodo

实现以检查是否按下了回车键 （），并在其中 情况下，创建一个新的待办事项，以输入的当前内容作为描述，并清除 输入所有内容。addTodoev.keyCode === 13

确保待办事项具有唯一的 ID。它可以只是一个在每个待办事项递增的计数器。

奖励点：如果输入为空，请不要执行任何操作。

另请参阅

猫头鹰：反应性

理论：组件生命周期和钩子

到目前为止，我们已经看到了一个钩子函数的例子：.钩子是一种特殊功能，可以钩入组件的内部。在 的情况下，它会生成一个链接到当前组件的代理对象。这就是为什么 钩子函数必须在方法中调用，而且不能再迟了！<code>useStateuseStatesetup

Owl 组件经历了很多阶段：它可以实例化、渲染、 安装、更新、拆卸、销毁......这是组件生命周期。 上图显示了组件生命周期中最重要的事件（钩子以紫色显示）。 粗略地说，一个组件被创建，然后更新（可能很多次），然后被销毁。

Owl 提供了多种内置的钩子功能。他们都必须被召唤进来 函数。例如，如果要在挂载组件时执行某些代码，则可以使用钩子：<code>setuponMounted

setup() {

onMounted(() => {

// do something here

});

}

提示

所有钩子函数都以 或 开头。例如：或 .useonuseStateonMounted

2. 集中输入

让我们看看如何使用 t-ref 和 useRef 访问 DOM。主要思想是你需要标记 组件模板中的目标元素，带有：t-ref

<div t-ref="some_name">hello</div>

然后，您可以使用 useRef 钩子在 JS 中访问它。 但是，如果您考虑一下，就会发现一个问题：实际的 html 元素 创建组件时，组件不存在。它仅在以下情况下存在 组件已挂载。但是必须在方法中调用钩子。因此，返回一个包含（for element）键的对象，该键仅在 组件已挂载。<code>setupuseRefel

setup() {

this.myRef = useRef('some_name');

onMounted(() => {

console.log(this.myRef.el);

});

}

重点关注上一个练习。这应该从组件中完成（请注意，输入html元素上有一个方法）。inputTodoListfocus

奖励点：将代码提取到新文件中的专用钩子中。useAutofocusawesome_owl/utils.js

提示

引用通常带有后缀，以表明它们是特殊对象：<code>Ref

this.inputRef = useRef('input');

3. 切换待办事项

现在，让我们添加一个新功能：将待办事项标记为已完成。这实际上比人们想象的要棘手 想。状态的所有者与显示状态的组件不同。因此，组件需要与其父级沟通，告知需要切换待办事项状态。一个经典 执行此操作的方法是添加回调 prop 。TodoItemtoggleState

在任务的 id 之前添加具有属性的输入，该输入必须 检查状态是否为 true。type="checkbox"code>isCompleted

提示

如果 Owl 的计算结果为 伪造值。t-att

将回调 props 添加到 .toggleStateTodoItem

在组件的输入上添加事件处理程序，并确保它使用 todo ID 调用函数。changeTodoItemtoggleState

让它工作！

4. 删除待办事项

在 中添加一个新的回调 prop。<code>removeTodoTodoItem

插入组件的模板。<span class="fa fa-remove"/>code>TodoItem

每当用户单击它时，它都应该调用该方法。removeTodo

让它工作！

提示

如果您使用数组来存储待办事项列表，则可以使用 JavaScript 函数从中删除待办事项。splice

// find the index of the element to delete

const index = list.findIndex((elem) => elem.id === elemId);

if (index >= 0) {

// remove the element at index from list

list.splice(index, 1);

}