最适合新手学习的react案例-Todolist尊享版！

石小石Orz2023-08-30 9:30

本教程，我们将借助react脚手架实现一个经典的todoList项目。

使用脚手架创建项目

我们使用 create-react-app 创建一个 简单的React 项目

  1. 全局安装create-react-app
js 复制代码 
npm install -g create-react-app
  1. 创建一个名为 my-react的项目
js 复制代码 
 create-react-app my-react
  1. 进入 my-react 目录 ，启动项目，在终端里执行命令 npm start，它会自动打开一个浏览器窗口并且显示你的React应用。或者浏览器输入http://localhost:3000/也可以访问
sql 复制代码 
 npm start

我们删除脚手架的一些用不上的文件，优化下脚手架目录

js 复制代码 
my-react
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ README.md
└─ src
   ├─ App.js
   └─ index.js

精简一些冗余代码

public\index.html

js 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src\index.js

js 复制代码 
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

我们在App.js中写一下基本的页面

js 复制代码 
import React from "react";
class App extends React.Component {
  render() {
    return <div>hello,react</div>;
  }
}
export default App;

npm start运行项目

上述代码中App.js还可以再优化下

js 复制代码 
import React, { Component } from "react";
export default class App extends Component {
  render() {
    return <div>hello,react</div>;
  }
}

上述代码中，我们能引入Component，采用了ES6的模块化，react内部大致是这样定义的：

js 复制代码 
const React = {};
export class Component {}
React.Component = Component;
export default React

项目静态样式创建

接下来，我们将创建一个todoList案例，它的主要界面及效果如下

根据示例，我们创建如下结构的项目目录

js 复制代码 
└─ src
   ├─ components
   │  ├─ Footer
   │  │  ├─ index.css
   │  │  └─ index.jsx
   │  ├─ Header
   │  │  ├─ index.css
   │  │  └─ index.jsx
   │  ├─ Item
   │  │  ├─ index.css
   │  │  └─ index.jsx
   │  └─ List
   │     ├─ index.css
   │     └─ index.jsx
   └─ index.js
   ├─ App.css
   ├─ App.jsx

上述代码中，存在以".jsx"结尾的文件，jsx文件是react脚手架中特有的文件类型，用于区分组件还是普通Js文件。

项目基础结构搭建完毕后，我们在每个组件中，完善基本的Html结构和css

App根组件

App.jsx

js 复制代码 
import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends Component {
  render() {
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header></Header>
          <List></List>
          <Footer></Footer>
        </div>
      </div>
    );
  }
}

注：react组件中，css的类名不能写"class"，需要写成"className"

App根组件中，引入App.css的基础样式文件

js 复制代码 
// src\App.css
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

同时引入了
、、 三个组件。

Header组件

js 复制代码 
// src\components\Header\index.jsx
import React, { Component } from "react";
import "./index.css";
export default class Header extends Component {
  render() {
    return (
      <div className="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" />
      </div>
    );
  }
}

Header组件的样式文件如下：

js 复制代码 
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

List组件

js 复制代码 
// src\components\List\index.jsx
import React, { Component } from "react";
import Item from "../Item";
import "./index.css";
export default class List extends Component {
  render() {
    return (
      <ul className="todo-main">
        <Item></Item>
      </ul>
    );
  }
}

List组件中，我们引入了其样式文件

js 复制代码 
// src\components\List\index.css
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

同时，引入了Item组件

Item组件

js 复制代码 
// src\components\Item\index.jsx
import React, { Component } from "react";
import "./index.css"
export default class Item extends Component {
  render() {
    return (
      <li>
        <label>
          <input type="checkbox" />
          <span>xxxxx</span>
        </label>
        <button className="btn btn-danger" style={{ display: "none" }}>
          删除
        </button>
      </li>
    );
  }
}

注：jsx中，style的内容需要使用" {{ }} "的写法

item组件中引入了其样式文件

js 复制代码 
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

Footer组件

src\components\Footer\index.jsx

js 复制代码 
import React, { Component } from "react";
import "./index.css"
export default class Footer extends Component {
  render() {
    return (
      <div className="todo-footer">
        <label>
          <input type="checkbox" />
        </label>
        <span>
          <span>已完成0</span> / 全部2
        </span>
        <button className="btn btn-danger">清除已完成任务</button>
      </div>
    );
  }
}

其样式文件如下：

js 复制代码 
// src\components\Footer\index.css
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}

项目功能完善

在这个demo中，我们很有多数据信息，App作为根组件，我们需要把所有数据放在这里，方便其他子组件获取数据。我们可以通过props的方式实现父子组件信息传递。

动态初始化列表

App组件中 定义列表值

我们在App的state中创建一个todos列表，传递给List组件

js 复制代码 
// src\App.jsx
import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends Component {
  // 初始化状态
  state = {
    todos: [
      { id: 1, name: "学习react", done: true },
      { id: 2, name: "学习redux", done: false },
      { id: 3, name: "学习react-router", done: false },
    ],
  };
  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header></Header>
          <List todos={todos}></List>
          <Footer></Footer>
        </div>
      </div>
    );
  }
}

List组件处理

在List组件中，我们接受这个props参数

js 复制代码 
// src\components\List\index.jsx
import React, { Component } from "react";
import Item from "../Item";
import "./index.css";
export default class List extends Component {
  render() {
    const { todos } = this.props;
    return (
      <ul className="todo-main">
        {
          todos.map((todo) => {
            return <Item key={todo.id}></Item>;
          })
        }
      </ul>
    );
  }
}

上述代码中，我们使用map方法，生成了多个Item组件，同vue一样，每个Item组件，我们传递了唯一key值。

此时，页面效果正常展示，但是，每个Item组件的内容是一样的，我们需要继续优化Item组件。

Item组件处理

我们在List组件中，向Item组件传递展示必要的信息id、name、done

js 复制代码 
import React, { Component } from "react";
import Item from "../Item";
import "./index.css";
export default class List extends Component {
  render() {
    const { todos } = this.props;
    return (
      <ul className="todo-main">
        {todos.map((todo) => {
          return <Item key={todo.id} id={todo.id} name={todo.name} done={todo.done}></Item>;
        })}
      </ul>
    );
  }
}

根据react基础知识，我们可以将上述代码优化

js 复制代码 
render() {
    const { todos } = this.props;
    return (
      <ul className="todo-main">
        {todos.map((todo) => {
          return <Item key={todo.id} {...todo}></Item>;
        })}
      </ul>
    );
  }

我们在Item组件中，接受信息

js 复制代码 
// src\components\Item\index.jsx
import React, { Component } from "react";
import "./index.css";
export default class Item extends Component {
  render() {
    const { id, name, done } = this.props;
    return (
      <li>
        <label>
          <input type="checkbox" defaultChecked={done} />
          <span>{name}</span>
        </label>
        <button className="btn btn-danger" style={{ display: "none" }}>
          删除
        </button>
      </li>
    );
  }
}

defaultChecked 是一个 React 元素的属性，用于设置表单元素的默认选中状态。它通常用于单选框（）和复选框（）元素。 defaultChecked 在组件挂载时只被使用一次，之后如果需要检查或修改选中状态，应该使用 checked 属性

页面效果：

完善Header组件添加todo功能

header组件实现的功能应该是输入内容后，按下回车键，传递给App根组件，再通过根组件传递给List组件。

获取输入值

我们先实现输入回车后，获取输入值的功能

js 复制代码 
import React, { Component } from "react";
import "./index.css";
export default class Header extends Component {
  handleKeyUp = (event) => {
    const { keyCode, target } = event;
    // 判断是否回车按键
    if (keyCode !== 13) return;
    console.log(target.value);
  };
  render() {
    return (
      <div className="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.handleKeyUp} />
      </div>
    );
  }
}

功能效果

onKeyUp 是一个 DOM 事件，在用户释放按键时触发。通常用于捕捉用户在输入框或文本框中的键盘输入。这个事件可以用来实时获取用户输入的文本内容，或者在用户输入完毕后执行某些操作。在 React 中，可以将 onKeyUp 作为事件处理函数绑定到特定的元素上，以便监听键盘输入。

上述代码，我们借助onKeyUp获取到了当前触发事件的键盘按钮keyCode，并通过event.target.value获取到了当前输入的值。

现在，我们需要将获取的输入值，传递给App根组件。

父子传值与nanoid

我们知道，通过props可以使App给子组件List传递数据，那么，子组件如何传递数据给父组件呢？在react中，我们可以给子组件传递一个函数。

App根组件

js 复制代码 
import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends Component {
  // 初始化状态
  state = {
    todos: [
      { id: 1, name: "学习react", done: true },
      { id: 2, name: "学习redux", done: false },
      { id: 3, name: "学习react-router", done: false },
    ],
  };
  addTodo = (value) => {
    console.log("父组件:我接受到了子组件的值 ", value);
  };
  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          <List todos={todos}></List>
          <Footer></Footer>
        </div>
      </div>
    );
  }
}

上述代码中，我们定义了一个addTodo属性，它的值是一个函数，并把这个函数通过props的形式传递给了Header组件。

此时，Header组件中，就可以访问addTodo函数。

js 复制代码 
import React, { Component } from "react";
import "./index.css";
export default class Header extends Component {
  handleKeyUp = (event) => {
    const { keyCode, target } = event;
    if (keyCode !== 13) return;
    this.props.addTodo(target.value);
  };
  render() {
    return (
      <div className="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.handleKeyUp} />
      </div>
    );
  }
}

那么，通过这个原理，我们就可以实现Header组件给父组件传递获取的输入值了。

App父组件完善

js 复制代码 
  state = {
    todos: [
      { id: 1, name: "学习react", done: true },
      { id: 2, name: "学习redux", done: false },
      { id: 3, name: "学习react-router", done: false },
    ],
  };
  addTodo = (todoObj) => {
    // 获取原Todos
    const { todos } = this.state;
    // 追加一个todo
    const newTodos = [todoObj, ...todos];
    // 更新状态
    this.setState({ todos: newTodos });
  };
  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          <List todos={todos}></List>
          <Footer></Footer>
        </div>
      </div>
    );
  }

上述代码，我们获取了子组件创建的todoObj，并添加到了原todo列表中，最后更新state转态。

Header组件完善

js 复制代码 
import React, { Component } from "react";
import { nanoid } from "nanoid";
import "./index.css";
export default class Header extends Component {
  handleKeyUp = (event) => {
    const { keyCode, target } = event;
    // 判断是否回车键
    if (keyCode !== 13) return;
    // 添加的名字不能为空
    if (target.value.trim() === "") return alert("输入不能为空！");
    // 准备好一个todo对象
    const todoObj = { id: nanoid(), name: target.value, done: false };
    this.props.addTodo(todoObj);
    // 清空输入
    target.value = "";
  };
  render() {
    return (
      <div className="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.handleKeyUp} />
      </div>
    );
  }
}

代码效果

上述代码中，我们生成id使用了nanoid

nanoid 是一个用于生成随机字符串的小型 JavaScript 库。它的主要特点是生成的字符串非常短，只有 21 个字符长度，而且采用 URL 安全的字符集，因此适合用于生成唯一的标识符。相比于传统的 UUID（32 个字符长度），nanoid 生成的字符串更短，更易于存储和处理。

nanoid 的使用非常简单，只需要调用它的函数即可生成一个随机字符串。例如：

js 复制代码 
import { nanoid } from 'nanoid'

const id = nanoid() // 例如：'YKcO3M-TyrT4pIYKa6tlK'

你也可以传入一个参数来指定生成字符串的长度。例如：

ini 复制代码 
const id = nanoid(10) // 例如：'hG93zLbZOt'

需要注意的是，由于 nanoid 是基于随机数生成的，因此它不保证生成的字符串是完全唯一的。但在实际使用中，由于字符串长度非常短，出现碰撞的概率非常小，可以满足绝大部分场景的需求。

Item组件高亮效果

现在我们需要实现鼠标移动到每个Item上，Itme高亮并显示删除按钮的效果

js 复制代码 
// src\components\Item\index.jsx
import React, { Component } from "react";
import "./index.css";
export default class Item extends Component {
  state = {
    mouse: false,
  };
  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag });
    };
  };
  render() {
    const { id, name, done } = this.props;
    const { mouse } = this.state;
    return (
      <li onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} style={{ background: mouse ? "#ddd" : "white" }}>
        <label>
          <input type="checkbox" defaultChecked={done} />
          <span>{name}</span>
        </label>
        <button className="btn btn-danger" style={{ display: mouse ? "block" : "none" }}>
          删除
        </button>
      </li>
    );
  }
}

注，handleMouse必须返回一个函数，否则onMouseEnter={this.handleMouse(true)}中的this.handleMouse会直接执行。

Item组件勾选与取消勾选

我们借助浏览器的react开发工具观察一下勾选Item时的state状态值。

可以发现，当我们勾选和取消勾选时，state的状态值是没有任何变化的，这是不对的，我们来完善一下这个效果。

我们要更改state 的值，就需要在实现App和Item组件之间的通信。它们是祖孙组件，我们可以在App中定义一个更新sate的函数，先传递给List组件，再由List组件传递给Item组件，在Item组件中调用该函数即可。

App组件

js 复制代码 
export default class App extends Component {
  // ......
  // 更新Item组件选中状态
  updateTodo = (id, done) => {
    // 获取状态中的todos
    const { todos } = this.state;
    // 匹配处理数据
    const newTodos = todos.map((todoObj) => {
      if (todoObj.id === id) return { ...todoObj, done };
      else return todoObj;
    });
    // 更新
    this.setState({ todos: newTodos });
  };
  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          <List todos={todos} updateTodo={this.updateTodo}></List>
          <Footer></Footer>
        </div>
      </div>
    );
  }
}

List组件

js 复制代码 
export default class List extends Component {
  render() {
    const { todos, updateTodo } = this.props;
    return (
      <ul className="todo-main">
        {todos.map((todo) => {
          return <Item key={todo.id} {...todo} updateTodo={updateTodo}></Item>;
        })}
      </ul>
    );
  }
}

list组件中，我们将获取的值直接传递给了Item组件

item组件：

js 复制代码 
import React, { Component } from "react";
import "./index.css";
export default class Item extends Component {
  state = {
    mouse: false,
  };
  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag });
    };
  };
  handleClick = (id) => {
    return (event) => {
      this.props.updateTodo(id, event.target.checked);
    };
  };
  render() {
    const { id, name, done } = this.props;
    const { mouse } = this.state;
    return (
      <li onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} style={{ background: mouse ? "#ddd" : "white" }}>
        <label>
          <input type="checkbox" defaultChecked={done} onChange={this.handleClick(id)} />
          <span>{name}</span>
        </label>
        <button className="btn btn-danger" style={{ display: mouse ? "block" : "none" }}>
          删除
        </button>
      </li>
    );
  }
}

在Item组件中，我们通过onChange事件来告诉父组件更新state的状态值，event.target.checked可以获得单选框的选中状态。

代码效果：

对props进行限制

结和props的知识，我们对Header组件和List组件的props进行类型限制

js 复制代码 
// Header组件
import React, { Component } from "react";
import PropTypes from "prop-types";
import { nanoid } from "nanoid";
import "./index.css";
export default class Header extends Component {
  static propTypes = {
    addTodo: PropTypes.func.isRequired,
  };
  // ....
}
  • 类的propTypes必须小写，而且需要有static关键词。
  • prop-types库需要单独引入，如果脚手架不自带，需要npm i prop-types

List组件

js 复制代码 
import React, { Component } from "react";
import PropTypes from "prop-types";
import Item from "../Item";
import "./index.css";
export default class List extends Component {
  static propTypes = {
    todos: PropTypes.array.isRequired,
    updateTodo: PropTypes.func.isRequired,
  };
  render() {
    const { todos, updateTodo } = this.props;
    return (
      <ul className="todo-main">
        {todos.map((todo) => {
          return <Item key={todo.id} {...todo} updateTodo={updateTodo}></Item>;
        })}
      </ul>
    );
  }
}

删除一个todo

删除的工作流程和其他之前的案例是一样的。

App组件中，我们定义一个删除方法，并传递给List组件

js 复制代码 
 // 删除
  deleteTodo = (id) => {
    const { todos } = this.state;
    const newTodos = todos.filter((todoObj) => todoObj.id !== id);
    this.setState({ todos: newTodos });
  };
  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}></List>
          <Footer></Footer>
        </div>
      </div>
    );
  }

list传递给item组件

js 复制代码 
  render() {
    const { todos, updateTodo, deleteTodo } = this.props;
    return (
      <ul className="todo-main">
        {todos.map((todo) => {
          return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo}></Item>;
        })}
      </ul>
    );
  }

Item组件

js 复制代码 
  // 删除一个todo的回调
  handleDelete = (id) => {
    if (window.confirm("确定删除吗？")) {
      this.props.deleteTodo(id);
    }
  };
  render() {
    const { id, name, done } = this.props;
    const { mouse } = this.state;
    return (
      <li onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} style={{ background: mouse ? "#ddd" : "white" }}>
        <label>
          <input type="checkbox" defaultChecked={done} onChange={this.handleClick(id)} />
          <span>{name}</span>
        </label>
        <button className="btn btn-danger" style={{ display: mouse ? "block" : "none" }} onClick={() => this.handleDelete(id)}>
          删除
        </button>
      </li>
    );
  }

全选功能

src\App.jsx

js 复制代码 
import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends Component {
  // 初始化状态
  state = {
    todos: [
      { id: 1, name: "学习react", done: true },
      { id: 2, name: "学习redux", done: false },
      { id: 3, name: "学习react-router", done: false },
    ],
  };
  addTodo = (todoObj) => {
    // 获取原Todos
    const { todos } = this.state;
    // 追加一个todo
    const newTodos = [todoObj, ...todos];
    // 更新状态
    this.setState({ todos: newTodos });
  };
  // 更新Item组件选中状态
  updateTodo = (id, done) => {
    // 获取状态中的todos
    const { todos } = this.state;
    // 匹配处理数据
    const newTodos = todos.map((todoObj) => {
      if (todoObj.id === id) return { ...todoObj, done };
      else return todoObj;
    });
    // 更新
    this.setState({ todos: newTodos });
  };
  // 删除
  deleteTodo = (id) => {
    const { todos } = this.state;
    const newTodos = todos.filter((todoObj) => todoObj.id !== id);
    this.setState({ todos: newTodos });
  };
  // 全选
  checkedAll = (done) => {
    const { todos } = this.state;
    // 加工数据
    const newTodos = todos.map((todoObj) => {
      return { ...todoObj, done };
    });
    this.setState({ todos: newTodos });
  };
  // 删除已完成
  deleteAll = () => {
    const { todos } = this.state;
    const newTodos = todos.filter((todoObj) => !todoObj.done);
    this.setState({ todos: newTodos });
  };
  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}></List>
          <Footer todos={todos} checkedAll={this.checkedAll} deleteAll={this.deleteAll}></Footer>
        </div>
      </div>
    );
  }
}

src\components\List\index.jsx

js 复制代码 
import React, { Component } from "react";
import PropTypes from "prop-types";
import Item from "../Item";
import "./index.css";
export default class List extends Component {
  static propTypes = {
    todos: PropTypes.array.isRequired,
    updateTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
  };
  render() {
    const { todos, updateTodo, deleteTodo } = this.props;
    return (
      <ul className="todo-main">
        {todos.map((todo) => {
          return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo}></Item>;
        })}
      </ul>
    );
  }
}

src\components\Item\index.jsx

js 复制代码 
import React, { Component } from "react";
import "./index.css";
export default class Item extends Component {
  state = {
    mouse: false,
  };
  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag });
    };
  };
  handleClick = (id) => {
    return (event) => {
      this.props.updateTodo(id, event.target.checked);
    };
  };
  // 删除一个todo的回调
  handleDelete = (id) => {
    if (window.confirm("确定删除吗？")) {
      this.props.deleteTodo(id);
    }
  };
  render() {
    const { id, name, done } = this.props;
    const { mouse } = this.state;
    return (
      <li onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} style={{ background: mouse ? "#ddd" : "white" }}>
        <label>
          <input type="checkbox" checked={done} onChange={this.handleClick(id)} />
          <span>{name}</span>
        </label>
        <button className="btn btn-danger" style={{ display: mouse ? "block" : "none" }} onClick={() => this.handleDelete(id)}>
          删除
        </button>
      </li>
    );
  }
}

src\components\Header\index.jsx

js 复制代码 
import React, { Component } from "react";
import PropTypes from "prop-types";
import { nanoid } from "nanoid";
import "./index.css";
export default class Header extends Component {
  static propTypes = {
    addTodo: PropTypes.func.isRequired,
  };
  handleKeyUp = (event) => {
    const { keyCode, target } = event;
    // 判断是否回车键
    if (keyCode !== 13) return;
    // 添加的名字不能为空
    if (target.value.trim() === "") return alert("输入不能为空！");
    // 准备好一个todo对象
    const todoObj = { id: nanoid(), name: target.value, done: false };
    this.props.addTodo(todoObj);
    // 清空输入
    target.value = "";
  };
  render() {
    return (
      <div className="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.handleKeyUp} />
      </div>
    );
  }
}

src\components\Footer\index.jsx

js 复制代码 
import React, { Component } from "react";
import "./index.css";
export default class Footer extends Component {
  checkedAll = (event) => {
    this.props.checkedAll(event.target.checked);
  };
  deleteAll = () => {
    this.props.deleteAll();
  };
  render() {
    const { todos } = this.props;
    // 已完成的
    const doneCount = todos.reduce((pre, cur) => pre + (cur.done ? 1 : 0), 0);
    // 总数
    const total = todos.length;

    return (
      <div className="todo-footer">
        <label>
          <input type="checkbox" checked={doneCount === total && total !== 0 ? true : false} onChange={this.checkedAll} />
        </label>
        <span>
          <span>已完成{doneCount}</span> / 全{total}
        </span>
        <button className="btn btn-danger" onClick={this.deleteAll}>
          清除已完成任务
        </button>
      </div>
    );
  }
}
相关推荐
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
September_ning7 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人7 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0017 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
Rattenking9 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
熊的猫10 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
小牛itbull14 小时前
ReactPress：重塑内容管理的未来
react.js·github·reactpress
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解