【React 全家桶】贯穿组件化设计模式，制作简易todo（内含源码）

@Dai

已于 2022-01-23 00:15:32 修改

阅读量781

点赞数 3

分类专栏： React 全家桶文章标签： react.js javascript 前端前端框架 jsx

于 2022-01-23 00:08:50 首次发布

本文链接：https://blog.csdn.net/weixin_46318413/article/details/122646051

版权

React 全家桶专栏收录该内容

15 篇文章 3 订阅

订阅专栏

React 制作 todo

一、设计项目结构
二、拆分组件，实现静态页面
三、功能1_添加任务信息到第一行
四、功能2_鼠标移到list内会高亮，并且显示"删除"按钮
五、功能3_通过点击复选框，改变state中的done
六、功能4_删除一个todo
七、功能5_实现底部的全选和清除功能
八、案例总结

一、设计项目结构

因为我们把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四个部分

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oLlmqUDz-1642866764006)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220122150045635.png)]$

2、在todo文件夹中新建Header、List、Item和Footer四个文件夹，里面分别新建index.jsx和index.css

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o34tDyiN-1642866764012)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220122153547168.png)]$

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;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CbURRJfM-1642866764015)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220122155516577.png)]$

三、功能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>
    );
  }
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MKw1rR58-1642866764017)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220122160628490.png)]$

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>
    )
  }
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PzOxbJRp-1642866764019)(D:\桌面\GIF1.gif)]$

四、功能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