React 制作 todo
一、设计项目结构
因为我们把todo作为一个功能的组件实现,所以基本的设计思路就是:
1、在components新建todo文件夹,新建index.jsx作为todo组件,这个文件夹里面放一些todo的小组件
2、在App.jsx中引入该组件
import Todo from './components/Todo'
,并在render中进行渲染:
import React, { Component } from 'react';
import Todo from './components/Todo';
export default class APP extends Component {
render() {
return (
<div id="root">
<Todo />
</div>
);
}
}
二、拆分组件,实现静态页面
1、我们将todo组件拆分为Header、List、Item和Footer四个部分
2、在todo文件夹中新建Header、List、Item和Footer四个文件夹,里面分别新建index.jsx和index.css
3 、将静态资源分别填入jsx和css
Todo文件夹
/*Todo/index.jsx*/
import React, { Component } from 'react';
import './index.css'
import Footer from './Footer';
import Header from './Header';
import List from './List';
export default class Todo extends Component {
render() {
return (
<div id="root">
<div className="todo-container">
<div className="todo-wrap">
<Header />
<List />
<Footer />
</div>
</div>
</div>
);
}
}
/*Todo/index.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文件夹
/*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/index.css*/
.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文件夹
/*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 />
</ul>
);
}
}
/*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/index.jsx*/
import React, { Component } from 'react';
import './index.css'
export default class Item extends Component {
render() {
return (
<div>
<li>
<label>
<input type="checkbox" />
<span></span>
</label>
<button className="btn btn-danger" style={
{ display: 'none' }}>删除</button>
</li>
</div>
);
}
}
/*Item/index.css*/
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文件夹
/*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>
);
}
}
/*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;
}
三、功能1_添加任务信息到第一行
因为涉及到兄弟组件之间的传值,所以我们这里需要通过与父组件的Props传值方法
1、首先在父组件(Todo/index.jsx)中设置模拟数,传到子组件List中
/*Todo/index.jsx*/
import React, { Component } from 'react';
import './index.css'
import Footer from './Footer';
import Header from './Header';
import List from './List';
export default class APP extends Component {
state = {
todos: [{
id: '001',
name: '吃饭',
done: true
}, {
id: '002',
name: '睡觉',
done: true
}]
}
render() {
const { todos } = this.state
return (
<div id="root">
<div className="todo-container">
<div className="todo-wrap">
<Header />
<List todos={todos} />
<Footer />
</div>
</div>
</div>
);
}
}
2、List组件接收父组件Todo传过来的Props,并将值传到List的子组件Item中进行显示
/*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((item) => {
return <Item key={item.id} {...item} />
})
}
</ul>
);
}
}
3、Item组件接收父组件List传过来的Props,并进行显示
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((item) => {
return <Item key={item.id} {...item} />
})
}
</ul>
);
}
}
4、父组件Todo通过Props传函数(addTodo)的方式获取到子组件Header中添加的数据
import React, { Component } from 'react';
import './index.css'
import Footer from './Footer';
import Header from './Header';
import List from './List';
export default class APP extends Component {
state = {
todos: [{
id: '001',
name: '吃饭',
done: true
}, {
id: '002',
name: '睡觉',
done: true
}]
}
//用于添加一个todo,参数为todo对象
addTodo = (todoObj) => {
let { todos } = this.state;
//将输入的内容放到数组第一位
todos.unshift(todoObj);
//修改状态
this.setState(todos)
}
render() {
const { todos } = this.state
return (
<div id="root">
<div className="todo-container">
<div className="todo-wrap">
<Header addTodo={this.addTodo} />
<List todos={todos} />
<Footer />
</div>
</div>
</div>
);
}
}
5、Header组件将父组件Todo传过来的函数通过监听"Enter键"进行执行,实现更新状态
nanoid的作用是生成唯一的值,主要为了给元素的key进行赋值
import React, { Component } from 'react';
//类似于uuid,生成唯一的id
import { nanoid } from 'nanoid';
import './index.css'
export default class Header extends Component {
handleKeyUp = (event) => {
const { keyCode, target } = event;
if (keyCode === 13) {
//这里还需要判断空格的多种情况(正则)
if (target.value !== "") {
const newTodo = { id: nanoid(), name: target.value, done: false };
this.props.addTodo(newTodo);
//清空输入的内容
target.value = ""
}
}
}
render() {
return (
<div className="todo-header">
<input type="text" placeholder="请输入你的任务名称,按回车键确认" onKeyUp={this.handleKeyUp} />
</div>
)
}
}
四、功能2_鼠标移到list内会高亮,并且显示"删除"按钮
此功能主要通过鼠标的移入移出事件进行判断,高亮的功能可以通过css中的:hover实现,本案例使用React中的方法
1、定义组件状态
state = { mouseType: false }
2、定义鼠标移入移出事件,true表示移入,false表示移出;并且将backgroundColor和display根据状态中的mouseType值进行相应的渲染。(这里使用高阶函数的柯里化方式实现)
import React, { Component } from 'react';
import './index.css'
export default class Item extends Component {
state = { mouseType: false }
//鼠标移入移出事件
handleMouse = (mouseType) => {
return () => {
this.setState({ mouseType })
}
}
render() {
const { name, done } = this.props
return (
<div>
<li style={
{ backgroundColor: this.state.mouseType ? '#ddd' : 'white' }} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
<label>
<input type="checkbox" defaultChecked={done} />
<span>{name}</span>
</label>
<button className="btn btn-danger" style={
{ display: this.state.mouseType ? 'block' : 'none' }}>删除</button>
</li>
</div>
);
}
}
五、功能3_通过点击复选框,改变state中的done
1、因为要实现子组件Item修改父组件List的父组件Todo中的state,就要通过在父组件Todo中定义updateTodo函数,通过props传到Item组件
/*Todo/index.jsx*/
//用于更新todo,参数为id
updateTodo = (id, done) => {
const { todos } = this.state;
let newTodos = todos.map((item) => {
if (item.id === id) {
return { ...item, done }
} else {
return item
}
})
this.setState({ todos: newTodos })
}
<List todos={todos} updateTodo={this.updateTodo} />
List/index.jsx
<Item key={item.id} {...item} updateTodo={updateTodo} />
2、在Item组件中,给复选框添加onChange事件,将当前选中的复选框对应的todo的id作为参数传给handleCheck
<input type="checkbox" defaultChecked={done} onChange={this.handleCheck(id)} />
3、在handleCheck函数中,将id和当前复选框的checked作为updateTodo的参数进行执行
//勾选或者取消勾选
handleCheck = (id) => {
return (event) => {
this.props.updateTodo(id, event.target.checked)
}
}
4、引入prop-types库,对各个组件的props进行限制(使用方法见:npm.com prop-types)
/*以Item/index.jsx为例*/
//对props进行限制
static propTypes = {
updateTodo: PropTypes.func.isRequired,
done: PropTypes.bool.isRequired
}
六、功能4_删除一个todo
1、逻辑与修改done的方式一样,首先在Item组件中,给删除按钮绑定onClick
<button onClick={this.handleDel(id)} className="btn btn-danger" style={
{ display: this.state.mouseType ? 'block' : 'none' }}>删除</button>
2、定义handleDel函数,执行从Todo组件传过来的deleteTodo函数
//删除一个todo
handleDel = (id) => {
return () => {
this.props.deleteTodo(id)
}
}
3、在Todo组件定义deleteTodo函数,并传给子组件List,再通过List组件传给子组件Item
Todo/index.jsx
//删除指定todo对象
deleteTodo = (id) => {
const { todos } = this.state;
const newTodos = todos.filter(item => {
return item.id !== id
})
this.setState({ todos: newTodos })
}
<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
List/index.jsx
<Item key={item.id} {...item} updateTodo={updateTodo} deleteTodo={deleteTodo} />
七、功能5_实现底部的全选和清除功能
1、先实现已完成数和全部数的统计
Footer/index.jsx
const { todos } = this.props
//已完成数
const doneCount = todos.reduce((pre, current) => {
return current.done === true ? ++pre : pre
}, 0)
<span>
<span>已完成{doneCount}</span> / 全部{todos.length}
</span>
2、实现全选的功能
Footer/index.jsx
<input type="checkbox" checked={doneCount === todos.length && todos.length !== 0 ? true : false} onChange={this.handleCheckAll} />
//全选
handleCheckAll = (event) => {
this.props.checkAllTodo(event.target.checked)
}
3、因为要改变数据状态,所以要在父组件Todo中定义函数,通过props传过来
Todo/index.jsx
//全选
checkAllTodo = (done) => {
const { todos } = this.state;
let newTodos = todos.map(item => {
return { ...item, done: done }
})
this.setState({ todos: newTodos })
}
<Footer todos={todos} checkAllTodo={this.checkAllTodo} />
4、实现清除已完成的功能
Footer/index.jsx
<button className="btn btn-danger" onClick={this.handleClear}>清除已完成任务</button>
//清除已完成任务
handleClear = () => {
this.props.clearAllDone()
}
5、因为要改变数据状态,所以要在父组件Todo中定义函数,通过props传过来
Todo/index.jsx
//清除所有已完成
clearAllDone = () => {
const { todos } = this.state;
const newTodos = todos.filter(item => {
return item.done === false
})
this.setState({ todos: newTodos })
}
<Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone} />
八、案例总结
1、拆分组件、实现静态组件,注意:className、style的写法
2、动态初始化列表,如何确定将数据放在哪个组件的state中
某个组件使用:放在其自身的state中
某些组件使用:放在他们共同的父组件state中(官方称之为状态提升)
3、关于父子之间通信:
(1)【父组件】给【子组件】传递数据, 通过props传递
(2)【子组件】给【父组件】传递数据:通过props传递,要求【父组件】提前给【子组件】传递一个函数
4、注意deafaultChecked 和 Checked 的区别,类似还有defaultValue 和 Value
5、状态在哪里,操作状态的方法就在哪里
源码地址:https://gitee.com/daiwanghao/react-family-bucket.git
以上React 制作todo的内容,请大家关注《React 全家桶》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享,一起进步,加油。