react TodoList新增、完成（按钮）、删除（按钮）

新增：

1、监听键盘（回车）事件

2、为input添加了一个save方法

3、把list当作一个属性传给Todos列表

4、写循环（把每条数据传给Todos进行展示）

5、取出每条数据进行展示

import React, { useState } from "react";

// 定义数据类型
interface Todo {
  id: string;
  txt: string;
  isEnd: boolean;
}

// 1、监听键盘事件
//      判断是否是回车键，并且输入框是否有值，把数据传出去
//      传递数据传递数据的时候需要一个属性或者是一个方法（save）
function TodoInput(props: { save: (txt: string) => void }) {
  // onKeyUp 键盘抬起时间 （可以获取最新值）
  // KeyboardEvent  相当于键盘事件
  const KeyUpHandle = (e: React.KeyboardEvent<HTMLInputElement>) => {
    // console.log(e.currentTarget.value); // 输入框的值

    if (e.keyCode == 13) {
      if (e.currentTarget.value) {
        props.save(e.currentTarget.value); // 传递数据到父组件
        e.currentTarget.value = ""; // 清空输入框
      } else {
        alert("请输入内容");
      }
    }
  };
  return <input type="text" placeholder="请输入内容" onKeyUp={KeyUpHandle} />;
}

function Todo(
  props: Todo & { end: (str: string) => void } & { del: (str: string) => void }
) {
  // ts中 &表示两个属性合到一起使用 -  表示Todo属性拼上end属性

  // 点击完成（完成步骤5）
  const endHandle = () => {
    props.end(props.id);
  };
  // 点击删除（删除步骤5）
  const delHandle = () => {
    if (confirm("是否确认删除")) {
      props.del(props.id);
    }
  };
  return (
    // 5、取出每条数据进行展示
    <div className="item">
      <h4>{props.txt}</h4>
      {/* （完成步骤6）（删除步骤6）*/}
      {props.isEnd ? null : <button onClick={endHandle}>完成</button>}
      <button onClick={delHandle}>删除</button>
      <hr />
    </div>
  );
}

const Todos = (props: {
  list: Todo[];
  end: (str: string) => void; //（完成步骤3）
  del: (str: string) => void; //（删除步骤3）
}) => {
  return (
    <>
      {/* 4、写循环（把每条数据传给Todos进行展示） */}
      {props.list.map((item) => (
        // （完成步骤4）（删除步骤4）
        <Todo key={item.id} {...item} end={props.end} del={props.del} />
      ))}
    </>
  );
};

function TodoList() {
  // 储存的数据
  // list 存储的数据（所有的数据都存在这里）
  const [list, setList] = useState<Todo[]>([]);

  // 保存
  const saveHandle = (txt: string) => {
    // 存数据
    setList([...list, { id: crypto.randomUUID(), txt, isEnd: false }]);
  };

  // 完成（完成步骤1）
  const end = (id: string) => {
    setList(
      // 判断选中的id，选中的id添加属性isEnd：true，否则原样返回
      list.map((item) =>
        item.id == id ? { ...item, isEnd: true } : { ...item }
      )
    );
  };

  // 删除（删除步骤1）
  const del = (id: string) => {
    setList(list.filter((item) => item.id != id));
  };
  return (
    <div className="todo-list">
      {/* 2、为input添加了一个save方法（接收一个文本作为参数）*/}
      <TodoInput save={saveHandle} />
      {/* 3、把list当作一个属性传给Todos列表 */}
      {/* （完成步骤2）（删除步骤2） */}
      <Todos list={list} end={end} del={del} />
    </div>
  );
}

export default TodoList;