使用React 实现简单TodoList功能

 本质核心知识点

一、如何定义一个react组件

         1.函数定义

         2.对象继承

         3.记得return()  jsx语法 

二、怎么定义一个响应式变量

1.使用usestate声明，[value,setvalue]=usestate(" ")

三、input框如何实现双向与数据双向绑定(实现vue的v-model效果)

       1.input标签的value属性值等于 数据

       2.给input标签绑定onChange事件  e.target.value会拿到input输入的值  再执行setinputvalue()更新数据，渲染页面

四、如何将数组里的值遍历渲染到页面上（类似于vue的v-for效果）

        1.array.map((item,index)=>{

           <li key=index>i{item}</li>

         })

五、给按钮绑定一个点击事件（实现  新增、删除功能）

        1.删除功能执行的时候，onClick=（）记得里面绑定一个回调函数，而不是立即执行函数

         2.执行add del函数的时候要创建一个副本 newlist=[...list]，因为react使用setvalue方法渲染页面时，原始数据名称不能和新的数据名称相同，否则无法更新渲染数据

import React, { useState } from "react";

const TodoList = () => {
  // 使用useState钩子声明state变量
  const [inputValue, setinputvalue] = useState(""); // 输入框的值
  const [list, setlist] = useState([]); // 任务列表数组

  // 处理输入框值的变化
  const handle = (e) => {
    setinputvalue(e.target.value);
  };

  // 添加任务到列表中
  const add = () => {
    const newList = [...list, inputValue]; // 将输入框的值添加到新的数组中
    setlist(newList); // 更新任务列表数组
  };

  // 删除特定位置上的任务
  const del = (index) => {
    const newList = [...list]; // 创建一个新的数组，复制任务列表数组
    newList.splice(index, 1); // 在新数组中删除指定索引位置的任务
    setlist(newList); // 更新任务列表数组
  };

  return (
    <div>
      <h2>任务列表</h2>
      <input type="text" value={inputValue} onChange={handle} /> {/* 输入框 */}
      <button onClick={add}>添加</button> {/* 添加按钮 */}
      <ul>
        {/* 循环渲染任务列表 */}
        {list.map((item, index) => {
          return (
            <li key={index}>
              {item} {/* 任务项 */}
              <button onClick={() => del(index)}>删除</button> {/* 删除按钮 */}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default TodoList;