基于React完成一个简单的待办事项列表|青训营

今天我们使用React来实现一个待办事项页面搭建。

1.目标功能

使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项

2.界面模块拆分

3.开撸代码

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:'001',name:'吃饭',done:true},
		{id:'002',name:'打代码',done:false},
		{id:'003',name:'看书',done:false}
	]}

	//addTodo用于添加一个todo，接收的参数是todo对象
	addTodo = (todoObj)=>{
		//获取原todos
		const {todos} = this.state
		//追加一个todo
		const newTodos = [todoObj,...todos]
		//更新状态
		this.setState({todos:newTodos})
	}

	//updateTodo用于更新一个todo对象
	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用于删除一个todo对象
	deleteTodo = (id)=>{
		//获取原来的todos
		const {todos} = this.state
		//删除指定id的todo对象
		const newTodos = todos.filter((todoObj)=>{
			return todoObj.id !== id
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	//checkAllTodo用于全选
	checkAllTodo = (done)=>{
		//获取原来的todos
		const {todos} = this.state
		//加工数据
		const newTodos = todos.map((todoObj)=>{
			return {...todoObj,done}
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	//clearAllDone用于清除所有已完成的
	clearAllDone = ()=>{
		//获取原来的todos
		const {todos} = this.state
		//过滤数据
		const newTodos = todos.filter((todoObj)=>{
			return !todoObj.done
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	render() {
		const {todos} = this.state
		return (
			<div className="todo-container">
                            <div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
					<Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
                            </div>
			</div>
		)
	}
}

初始化状态中包含了三个todo对象，分别表示吃饭、打代码和看书，其中吃饭已完成，其他两个未完成。

• addTodo方法用于添加一个todo对象，接收一个todoObj参数，将其追加到原有的todos数组中，并更新状态。
• updateTodo方法用于更新一个todo对象，接收一个id和done参数，根据id匹配到对应的todo对象，将其done属性更新为传入的done值，并更新状态。
• deleteTodo方法用于删除一个todo对象，接收一个id参数，根据id过滤掉原有的todos数组中对应的todo对象，并更新状态。
• checkAllTodo方法用于全选或取消全选，接收一个done参数，将todos数组中所有的todo对象的done属性都更新为传入的done值，并更新状态。
• clearAllDone方法用于清除所有已完成的todo对象，过滤掉原有的todos数组中done属性为true的todo对象，并更新状态。 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 {

	//对接收的props进行：类型、必要性的限制
	static propTypes = {
		addTodo:PropTypes.func.isRequired
	}

	//键盘事件的回调
	handleKeyUp = (event)=>{
		//解构赋值获取keyCode,target
		const {keyCode,target} = event
		//判断是否是回车按键
		if(keyCode !== 13) return
		//添加的todo名字不能为空
		if(target.value.trim() === ''){
			alert('输入不能为空')
			return
		}
		//准备好一个todo对象
		const todoObj = {id:nanoid(),name:target.value,done:false}
		//将todoObj传递给App
		this.props.addTodo(todoObj)
		//回车后清空输入
		target.value = ''
	}

	render() {
		return (
			<div className="todo-header">
				<input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的代办事件名称，按回车键确认"/>
			</div>
		)
	}
}

index.jsx中，定义好一个输入框之后最重要的就是获取到输入的内容构建一个对象，然后传给父组件传来的addTodo，即handleKeyUp方法，这个函数在onKeyUp按键弹起后触发,event中的target.value和keyCode可以用于获取输入值和某一案件的键值。

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 {

	//对接收的props进行：类型、必要性的限制
	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}/>
				    })
				}
			</ul>
		)
	}
}

List用于显示Todo应用的任务列表。

• 在组件的静态属性中，使用PropTypes对接收的props进行类型和必要性的限制。在这里，限制了todos属性的类型为数组，并且必须存在；updateTodo和deleteTodo属性的类型为函数，并且必须存在。
• 在render方法中，首先获取父组件传递的todos、updateTodo和deleteTodo属性。然后使用map方法遍历todos数组，对每个todo对象返回一个Item组件，并传递相应的props。在这里，使用了展开运算符将todo对象的所有属性传递给Item组件，包括key、name、done等。同时，将updateTodo和deleteTodo方法也传递给Item组件。
• 最后，渲染一个ul元素，并将所有的Item组件作为子元素放入其中。

注意：在render方法中，todos、updateTodo和deleteTodo方法是通过props传递进来的，所以需要使用this.props.todos、this.props.updateTodo和this.props.deleteTodo来访问。同样地，propTypes是通过静态属性设置的，所以需要使用static修饰符来定义。 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})
		}
	}

	//勾选、取消勾选某一个todo的回调
	handleCheck = (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 style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
				<label>
					<input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
					<span>{name}</span>
				</label>
				<button onClick={()=> this.handleDelete(id) } className="btn btn-blue" style={{display:mouse?'block':'none'}}>删除</button>
			</li>
		)
	}
}

Header用于显示Todo应用的头部输入框。

• 在组件的静态属性中，使用PropTypes对接收的props进行类型和必要性的限制。在这里，限制了addTodo属性的类型为函数，并且必须存在。
• handleKeyUp方法是键盘事件的回调函数，当按键抬起时触发。首先使用解构赋值获取event对象的keyCode和target属性。然后判断keyCode是否为回车键的keyCode，如果不是，则直接返回。接下来判断输入框的值是否为空，如果为空，则弹出提示框并返回。如果输入框的值不为空，则准备一个todo对象，包括一个随机生成的id、输入框的值作为name属性，以及done属性初始值为false。然后将todo对象传递给父组件传递的addTodo方法。最后，将输入框的值清空。
• 在render方法中，渲染头部的HTML结构，包括一个输入框和提示文字。

注意：在render方法中，addTodo方法是通过props传递进来的，所以需要使用this.props.addTodo来调用。同样地，propTypes是通过静态属性设置的，所以需要使用static修饰符来定义。 Footer/index.jsx

import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {

	//全选checkbox的回调
	handleCheckAll = (event)=>{
		this.props.checkAllTodo(event.target.checked)
	}

	//清除已完成任务的回调
	handleClearAllDone = ()=>{
		this.props.clearAllDone()
	}

	render() {
		const {todos} = this.props
		//已完成的个数
		const doneCount = todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0),0)
		//总数
		const total = todos.length
		return (
			<div className="todo-footer">
				<label>
					<input type="checkbox" onChange={this.handleCheckAll} checked={doneCount === total && total !== 0 ? true : false}/>
				</label>
				<span>
					<span>已完成{doneCount}</span> / 全部{total}
				</span>
				<button onClick={this.handleClearAllDone} className="btn btn-blue">清除已完成事件</button>
			</div>
		)
	}
}

Footer，用于显示Todo应用的底部信息和操作按钮。

• handleCheckAll方法是全选checkbox的回调函数，当全选checkbox的状态改变时，调用父组件传递的checkAllTodo方法，并将checkbox的checked属性作为参数传递给它。
• handleClearAllDone方法是清除已完成任务的回调函数，当点击清除已完成事件按钮时，调用父组件传递的clearAllDone方法。
• 在render方法中，首先获取父组件传递的todos属性。然后使用reduce方法计算已完成的任务个数(doneCount)，通过遍历todos数组，对每个todo对象进行判断，如果其done属性为true，则doneCount加1。接着获取todos数组的长度作为总数(total)。最后，渲染底部的HTML结构，包括一个全选checkbox、已完成任务个数和总数的显示，以及一个清除已完成事件的按钮。

注意：在render方法中，todos属性是通过props传递进来的，所以需要使用this.props.todos来访问。同样地，checkAllTodo和clearAllDone方法也是通过props传递进来的，所以需要使用this.props.checkAllTodo和this.props.clearAllDone来调用。 具体细节均在注释中已有标注，这里不再过多阐述。

4.不足

有关css的部分并未完成，请大家见谅。

5.总结

在这个小案例中，我们成功地实现了一个功能完善的待办事项应用，实现了添加、删除和编辑待办事项的功能。通过这个案例，我们深入理解了React中的两大核心概念：state（状态）和props（属性），并学会了使用prop-types库进行属性类型检查和nanoid库生成唯一的ID。这个案例的完成对我们来说是一次很大的收获，我们在实践中不仅巩固了React的基础知识，还学会了使用一些常用的第三方组件库。

6.参考

React 官方中文文档 (docschina.org)

【React】模块化案例 - 使用React写一个简单的TodoList待办事项网页页面 - 掘金 (juejin.cn)