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

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

一、React任务列表管理

在使用React管理任务列表时，需要经历多个步骤来完善功能。

1. 输入字段修改验证
   • 当输入字段变为可编辑状态后，需要处理离开输入字段的操作（onBlur事件）。具体做法是重新显示文本元素（替代输入字段），并更新响应式“items”变量中的元素。
   • 恢复文本元素：将响应式变量“modifyOn”设置为false。
   • 修改“items”变量中的元素值：更新“items”数组中的元素，然后使用 return [...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 retur