TodoList-React-Function组件

src文件
1.入口文件(index.js)

import React from "react";
import ReactDOM from "react-dom/client"; // createRoot的包是从这导出来的
// reac18采用了 createRoot的方式来进行渲染
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <div>
    <ReducerHook />
  </div>
);

2.多级传递数据(context.js)

/*
    使用hook实现todo的思路

        1. 先准备 context 共享  list,add,remove,check 4个数据
        2. 实现添加
            2.1 先把 input 变成 受控组件  value=state.xxx  onchange=e.target.value
            2.2 点击添加，调用 context 的add方法实现添加
        3. 实现渲染
            通过 父传子的方式把 已经完成 正在进行进行筛选，给到 List 组件
            List组件再传递给Item组件
            Item使用map进行渲染
        4. 实现删除
            点击删除，调用 context的remove方法
        5. 实现勾选
            点击checbox，调用context的check方法
*/

import { createContext } from "react";

const defVal = {
  list: [{ id: 1, context: "", isDone: false }],
  add(content = "") {},
  remove(id = 1) {},
  check(id = 1) {},
};
const context = createContext(defVal);

export default context;

3.todo.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.todo {
  width: 600px;
  box-shadow: 0 0 4px 2px #ccc, 0 0 4px 2px #ccc inset;
  margin: 100px auto;
  padding: 20px;
}
.add {
  display: flex;
  padding: 40px;
}
.add input {
  width: 400px;
  height: 40px;
  outline: none;
  border: 1px solid #ccc;
  padding: 0 20px;
}
.add button {
  width: 100px;
}
.list {
  padding: 20px;
}
.item {
  display: flex;
  align-items: center;
  border-bottom: 1px dashed #ccc;
}
.item p {
  flex: 1;
  line-height: 40px;
  padding-left: 20px;
}

4.Todo.jsx(外层盒子组件)

import React, { useState } from "react";
import "./todo.css";

import TodoAdd from "./TodoAdd";
import TodoList from "./TodoList";
import Context from "./context";

let id = 2;

export default function Todo() {
  const [list, setList] = useState([
    { id: 1, content: "1111", isDone: false },
    { id: 2, content: "2222", isDone: true },
  ]);
  const add = (content) => {
    // 如果遇上引用类型是 state，一般会先深拷贝一份
    const ls = JSON.parse(JSON.stringify(list));
    ls.push({ id: ++id, content, isDone: false });
    setList(ls);
  };
  const remove = (id) => {
    const ls = JSON.parse(JSON.stringify(list));
    // 得到索引
    let idx = ls.findIndex((item) => item.id === id);
    // 删除
    ls.splice(idx, 1);
    // 同步
    setList(ls);
  };
  const check = (id) => {
    // state如果是引用，记得先复制一份
    const ls = JSON.parse(JSON.stringify(list));
    //   把对应id对应的对象的isDone 修改
    // 找到对应的对象
    const target = ls.find((item) => item.id === id); // find 是找到数组里面满足条件的第一个数据
    // 如果有target，就修改target的isDone
    target && (target.isDone = !target.isDone);
    // setList 触发视图的更新
    setList(ls);
  };
  return (
    <Context.Provider value={{ list, add, remove, check }}>
      <div className="todo">
        <h1>TodoListDemo</h1>
        {/* 用于添加的子组件 */}
        <TodoAdd />
        {/* 两个列表 */}
        {/* 正在进行 */}
        <TodoList data={list.filter((item) => !item.isDone)} title="正在进行" />
        {/* 已经完成 */}
        <TodoList data={list.filter((item) => item.isDone)} title="已经完成" />
      </div>
    </Context.Provider>
  );
}

5.TodoAdd.jsx(输入框)

import React, { useContext, useState } from "react";
import context from "./context";

export default function TodoAdd() {
  const [value, setValue] = useState("");
  const { add } = useContext(context);
  const onChange = (e) => {
    setValue(e.target.value);
  };

  const onClick = () => {
    add(value);
    setValue("");
  };
  return (
    <div className="add">
      <input type="text" value={value} onChange={onChange} />
      <button onClick={onClick}>添加</button>
    </div>
  );
}

6.TodoList.jsx(未完成栏与已完成栏)

import React from "react";
import TodoListItem from "./TodoListItem";

export default function TodoList({ data, title }) {
  return (
    <div className="list">
      <h2>{title}</h2>
      <TodoListItem data={data} />
    </div>
  );
}

7.TodoListItem.jsx(其中的li)

import React, { useContext } from "react";
import context from "./context";

export default function TodoListItem({ data }) {
  const { remove, check } = useContext(context);
  return (
    <div>
      <div>
        {data.map((item) => (
          <div className="item">
            <input
              type="checkbox"
              checked={item.isDone}
              onChange={() => check(item.id)}
            />
            <p>{item.content}</p>
            <span onClick={() => remove(item.id)}>删除</span>
          </div>
        ))}
      </div>
    </div>
  );
}

标签：Function,const,TodoList,React,item,ls,context,import,id
来源： https://www.cnblogs.com/Gawainehzh/p/16123321.html