11、React任务列表管理与JavaScript基础回顾

React任务列表管理与JavaScript基础回顾

1. React任务列表管理

在使用React管理任务列表时，我们需要完成一系列步骤来确保列表的正确显示和操作。

1.1 输入字段修改验证

当输入字段变为可编辑状态后，我们需要处理离开输入字段的情况（ onBlur 事件）。具体操作如下：
- 将响应式变量 modifyOn 设置为 false ，以恢复文本元素代替输入字段。
- 修改响应式 items 变量中元素的值，更新 items 数组并返回一个新数组。

以下是修改后的 Item 组件代码：

import { useState } from "react";
function Item({name, index, setItems}) {
  const [modifyOn, setModifyOn] = useState(false);
  const [text, setText] = useState(name);
  function remove() {
    setItems(function(items) {
      items = items.filter(function(item, i) {
        if (index == i) return false;
        else return true;
      });