本教程，我们将借助react脚手架实现一个经典的todoList项目。
使用脚手架创建项目
我们使用 create-react-app 创建一个 简单的React 项目
全局安装create-react-app
npm install -g create-react-app创建一个名为 my-react的项目
create-react-app my-react进入 my-react 目录 ，启动项目，在终端里执行命令 npm start，它会自动打开一个浏览器窗口并且显示你的React应用。或者浏览器输入http://localhost:3000/也可以访问
npm start我们删除脚手架的一些用不上的文件，优化下脚手架目录
my-react ├─ public │ ├─ favicon.ico │ └─ index.html ├─ README.md └─ src ├─ App.js └─ index.js精简一些冗余代码
public\index.html<!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
```typescript
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
);
我们在App.js中写一下基本的页面
```typescript
import React from "react";
class App extends React.Component {
render() {
return <div>hello,react</div>;
}
}
export default App;
npm start运行项目
上述代码中App.js还可以再优化下
import React, {
Component } from "react";
export default class App extends Component {
render() {
return <div>hello,react</div>;
}
}
上述代码中，我们能引入Component，采用了ES6的模块化，react内部大致是这样定义的：
const React = {
};
export class Component {
}
React.Component = Component;
export default React
项目静态样式创建
接下来，我们将创建一个todoList案例，它的主要界面及效果如下
根据示例，我们创建如下结构的项目目录
└─ 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
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的基础样式文件
// 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组件
// 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组件的样式文件如下：
.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组件
// 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组件中，我们引入了其样式文件
// 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组件
// 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组件中引入了其样式文件
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
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>
);
}
}
其样式文件如下：
// 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组件
// 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参数
// 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
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基础知识，我们可以将上述代码优化
render() {
const {
todos } = this.props;
return (
<ul className="todo-main">
{
todos.map((todo) => {
return <Item key={
todo.id} {
...todo}></Item>;
})}
</ul>
);
}
我们在Item组件中，接受信息
// 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组件。
获取输入值
我们先实现输入回车后，获取输入值的功能
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根组件
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函数。
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父组件完善
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组件完善
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 的使用非常简单，只需要调用它的函数即可生成一个随机字符串。例如：
import { nanoid } from 'nanoid'
const id = nanoid() // 例如：'YKcO3M-TyrT4pIYKa6tlK'
你也可以传入一个参数来指定生成字符串的长度。例如：
const id = nanoid(10) // 例如：'hG93zLbZOt'
需要注意的是，由于 nanoid 是基于随机数生成的，因此它不保证生成的字符串是完全唯一的。但在实际使用中，由于字符串长度非常短，出现碰撞的概率非常小，可以满足绝大部分场景的需求。
Item组件高亮效果
现在我们需要实现鼠标移动到每个Item上，Itme高亮并显示删除按钮的效果
// 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组件
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组件
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组件：
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进行类型限制
// 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组件
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组件
// 删除
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组件
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组件
// 删除一个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
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
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
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
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
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>
);
}
}
