React模块化案例 - TodoList - 页面拆分 - 静态页面搭建 - 动态页面交互实现 - 总结
Posted YK菌
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React模块化案例 - TodoList - 页面拆分 - 静态页面搭建 - 动态页面交互实现 - 总结相关的知识，希望对你有一定的参考价值。
之前用Vue写过这个页面，这次用React再写一次，步骤功能都是类似的，就是语法和用法有点区别
【Vue】Vue模块化实战-demo2-任务清单todoList
可以对比着学习一下
1. 目标功能界面
2. 界面模块拆分
3. 主页 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>
4. 静态页面搭建
index.js
import React from "react";
import ReactDDOM from "react-dom";
import App from "./App";
ReactDDOM.render(<App />, document.getElementById("root"));
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-warp">
<Header />
<List />
<Footer />
</div>
</div>
);
}
}
App.css
/*base*/
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;
}
/*app*/
.todo-container {
width: 600px;
margin: 0 auto;
}
.todo-container .todo-wrap {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
Header/index.js
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
/*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/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
/*main*/
.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/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>
)
}
}
Item/index.css
/*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/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
/*footer*/
.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;
}
页面效果
5. 动态组件
5.1 动态初始化页面
状态驱动组件
考虑两个问题 要将状态放在哪？ 状态的存储形式是什么？
-
可以将状态放在需要使用状态的 父组件 App中，这样Header和List都可以通过props拿到状态数据
-
状态的存储形式采用对象数组
// 初始化状态
state = {
todos: [
{ id: '001', name: '吃饭', done: true },
{ id: '002', name: '睡觉', done: true },
{ id: '003', name: '敲代码', done: false },
]
}
App.jsx
在App.jsx组件中定义状态state，通过标签属性传递给子组件List的props中
export default class App extends Component {
// 初始化状态
state = {
todos: [
{ id: '001', name: '吃饭', done: true },
{ id: '002', name: '睡觉', done: true },
{ id: '003', name: '敲代码', done: false },
]
}
render() {
const {todos} = this.state
return (
<div className="todo-container">
<div className="todo-warp">
<Header />
<List todos={todos} />
<Footer />
</div>
</div>
)
}
}
List/index.jsx
子组件通过this.props得到父组件传递过来的状态
通过循环遍历todos得到一个个todo，将他们传递给Item子组件
通过标签属性的形式，父组件List传递状态到子组件Item中
指定key 再展开todo传递给子组件
export default class List extends Component {
render() {
const {todos} = this.props
return (
<ul className="todo-main">
{
todos.map((todo) => {
return <Item key={todo.id} {...todo}/>
})
}
</ul>
)
}
}
Item/index.jsx
子组件通过this.props得到父组件传递过来的每个todo的状态
动态渲染props中获取的状态 name 和 done
export default class Item extends Component {
render() {
const { 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>
)
}
}
5.2 动态添加todo
子组件要向父组件 传递 得到的输入值
可以通过调用函数， 传递参数的形式 来传递状态
App.jsx
状态在父组件中，修改状态的操作就定义在父组件中
在父组件中定义一个addTodo函数，然后通过标签传递给子组件
addTodo函数接受一个参数，这个参数就是要接受的子组件的数据
通过这个参数，将子组件的数据传给父组件
export default class App extends Component {
// 用于添加一个todo，接受的参数是todo对象
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-warp">
<Header addTodo={this.addTodo} />
<List todos={todos} />
<Footer />
</div>
</div>
);
}
}
Header/index.js
生成唯一id的库
uuid
nanoid
npm install nanoid
父组件通过标签属性传递了一个函数给子组件，子组件可以通过this.props来调用函数
函数的参数，就是子组件要传递给父组件的数据
export default class Header extends Component {
handleKeyUp = (event) => {
const {keyCode, target} = event
if (keyCode !== 13) return
if (target.value.trim() === '') {
alert('输入不能为空')
return
}
this.props.addTodo({
id: nanoid(),
name: target.value,
done: false
})
target.value = ''
}
render() {
return (
<div className="todo-header">
<input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
</div>
)
}
}
5.3 鼠标悬浮高亮
定义一个mouse状态，用来 标识鼠标移入移出
通过mouse状态的改变，来改变style样式（背景颜色+删除按钮显示与隐藏）
Item/index.js
export default class Item extends Component {
// 标识鼠标移入移出
state = {
mouse: false
}
// 鼠标移入移出的回调
handleMouse = (flag) => {
return () => {
this.setState({mouse: flag})
}
}
render() {
const { 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" defaultChecked={done}/>
<span>{name}</span>
</label>
<button className="btn btn-danger" style={{display: mouse?'block':'none'}}>删除</button>
</li>
)
}
}
5.4 勾选 改变 状态
勾选前面的选中框，要改变到state中的数据
根据选中的框所属的todo的id找到数据，根据更改后done的值更新相应的done的值
App.jsx
在父组件中定义一个更新todo的函数，然后传递给子组件
根据拿到的id和done的值，来更新状态state中相应id数据的值
export default class App extends Component {
// 用于更新一个todo
updateTodo = (id, done) => {
const { todos } = this.state
const newTodos = todos.map((todo) => {
if (todo.id === id) {
return {...todo, done: done}
} else 基于React实现TodoList简单案例