app.js

  1. //app.js
  2. import React,{useState} from "react"
  3. import Header from "./components/Header/index"
  4. import Search from "./components/Search"
  5. import cssObj from "./index.module.css"
  6. import Content from "./components/Content"
  7. import Footer from "./components/Footer"
  8. function App() {
  9.   const [title]=useState("My Todo With React")
  10.   return (
  11.     <div className={cssObj.app}>
  12.      <Header title={title}/>
  13.      <Search/>
  14.      <Content/>
  15.      <Footer/>
  16.     </div>
  17.   );
  18. }
  20. export default App;
  1. //index.module.css
  2. .app{
  3.     /* position: absolute;
  4.     left:50%;
  5.     bottom: 50%;
  6.     transform: translate(-50%,-50%); */
  7.      width: 500px;
  9.      border:1px solid red;
  10.      margin: 30px auto;
  11. }

封装button组件

  1. //buttons.jsx
  2. import React, { Component } from 'react'
  3. import PropTypes from 'prop-types'
  4. import { Button } from 'antd';
  5. export default class index extends Component {
  6.     static propTypes = {
  7.         btnTitle: PropTypes.string
  8.     }
  9.     ClickHandle=(e)=>{
  10.       if( this.props.addHandle){
  11.         this.props.addHandle()
  12.       }
  13.       if(this.props.deleteHandle){
  14.           this.props.deleteHandle()
  15.       }
  17.     }
  18.     render() {
  19.         const {btnTitle}=this.props
  20.         return (
  21.             <div>
  22.                 <Button type="primary" onClick={this.ClickHandle}>{btnTitle}</Button>
  23.             </div>
  24.         )
  25.     }

头部header

  1. //header.jsx
  2. import React, { Component } from 'react'
  3. import PropTypes from 'prop-types'
  5. export default class index extends Component {
  6.     static propTypes = {
  7.      title: PropTypes.string
  8.     }
  10.     render() {
  11.         const {title}=this.props
  12.         return (
  13.          <div>
  14.              <h1 style={{textAlign:'center',marginBottom:'20px',lineHeight:'35px',height:'30px'}}>{title}</h1>
  15.              <hr/>
  16.          </div>
  17.         )
  18.     }
  19. }

内容部分content

  1. //content.jsx
  2. import React, {
  3.     Component
  4. } from 'react'
  5. import {
  6.     Button
  7. } from 'antd';
  8. import './index.css'
  9. import PubSub from 'pubsub-js'
  10. export default class index extends Component {
  11.     state = {
  12.         arr: [{
  13.                 id: 1,
  14.                 title: "天气不错",
  15.                 state: 0,
  16.                 num: 1,
  17.                 btn: '删除'
  18.             },
  19.             {
  20.                 id: 2,
  21.                 title: "天气不错",
  22.                 state: 0,
  23.                 num: 1,
  24.                 btn: '删除'
  25.             },
  26.             {
  27.                 id: 3,
  28.                 title: "天气不错",
  29.                 state: 1,
  30.                 num: 1,
  31.                 btn: '删除'
  32.             },
  33.             {
  34.                 id: 4,
  35.                 title: "天气不错",
  36.                 state: 1,
  37.                 num: 1,
  38.                 btn: '删除'
  39.             },
  40.             {
  41.                 id: 5,
  42.                 title: "天气不错",
  43.                 state: 1,
  44.                 num: 1,
  45.                 btn: '删除'
  46.             }
  47.         ],
  48.         tag: 0
  49.     }
  51.     setStateAsync(state) {
  52.         return new Promise((resolve) => {
  53.             this.setState(state, resolve)
  54.         });
  55.     }
  57.     componentDidMount() {
  58.         //拿到全局的数据
  59.         let newArr = this.state.arr
  60.         //添加操作的订阅器
  61.         this.submit = PubSub.subscribe('NewObj', async (msg, data) => {
  62.             if (msg === 'NewObj') {
  63.                 await this.setStateAsync({
  64.                     arr: [...this.state.arr, data]
  65.                 })
  66.                 //拿到改变后全局的数据
  67.                 newArr = this.state.arr
  68.             }
  69.         });
  70.          //筛选操作的订阅器
  71.         this.submitTag = PubSub.subscribe('tag', (msg, tag) => {
  72.             let arrItem = []
  73.             if (tag === -1) {
  74.                 arrItem = newArr
  75.             } else {
  76.                 arrItem = newArr.filter(item => item.state === tag)
  77.             }
  78.             this.setState({
  79.                 arr: arrItem
  80.             })
  81.         });
  82.     }
  83.     //删除订阅器
  84.     componentWillUnmount() {
  85.         PubSub.unsubscribe(this.submit);
  86.         PubSub.unsubscribe(this.submitTag);
  87.     }
  90.     //删除操作
  91.     deleteHandle = (id) => {
  92.         let index = this.state.arr.findIndex(item => {
  93.             return item.id === id
  94.         })
  95.         this.state.arr.splice(index, 1)
  96.         this.setState({
  97.             arr: this.state.arr
  98.         })
  99.     }
  101. //改变状态
  102.     change = (id) => {
  103.         this.state.arr.forEach(item => {
  104.             if (item.id === id) {
  105.                 item.state === 0 ? item.state = 1 : item.state = 0
  106.             }
  107.         })
  108.         this.setState({
  109.             arr: [...this.state.arr]
  110.         })
  112.     }
  113.     render() {
  114.             const {arr}=this.state
  115.             return (
  116.                 <div className="bodyStyle">
  117.                {
  118.                    arr.map(item=>{
  119.                        return (
  120.                            <ul className="contentStyle" key={item.id}>
  121.                                <li>{item.title}</li>
  122.                                <li className={item.state===0?'finsihState':'startState'} onClick={this.change.bind(this,item.id)}>{item.state===0?'未完成':'已完成'}</li>
  123.                                <li>{item.num}</li>
  124.                                <li>
  125.                                <Button onClick={this.deleteHandle.bind(this,item.id)} type="primary">{item.btn}</Button>
  126.                                </li>
  127.                            </ul>
  128.                        )
  129.                    })
  130.                }
  131.                 </div>
  132.             )
  133.         }
  134.     }
  1. .contentStyle{
  2.     display: flex;
  3.     justify-content: space-evenly;
  4.     align-content: center;
  5.     list-style: none;
  6. }
  7. .finsihState{
  8.     text-decoration: line-through;
  9.     cursor: pointer;
  10. }
  11. .startState{
  12.     cursor: pointer;
  13. }
  14. .bodyStyle{
  15. padding-top: 30px;
  16. }
  17. .contentStyle li{
  18.     height: 40px;
  19.     line-height:40px;
  20. }

尾部footer

  1. import React, { Component } from 'react'
  2. // import PropTypes from 'prop-types'
  3. import { Button } from 'antd';
  4. import "./index.css" 
  5.  import PubSub from 'pubsub-js' //引入
  6. export default class index extends Component {
  8.     state={
  9.         list:[-1,1,0]
  10.     }
  11.     filterHandle=(tag)=>{
  12.    switch (tag) {
  13.        case '全部':
  14.         PubSub.publish('tag', tag) //发布消息       
  15.            break;
  16.            case '未完成':
  17.         PubSub.publish('tag', tag) //发布消息       
  18.            break;
  19.        default:
  20.         PubSub.publish('tag', tag) //发布消息  
  21.            break;
  22.    }
  23.     }
  24.     render() {
  25.         const {list}=this.state
  26.         return (
  27.             <div className="btnArea">
  28.          {
  29.              list.map((item,index)=>{
  30.                  return(
  31.                          <Button type="primary" key={index} onClick={this.filterHandle.bind(this,item)}>{item===-1?'全部':(item===0?'未完成':'已完成')}</Button>
  32.                  )
  33.              })
  34.          }
  35.             </div>
  36.         )
  37.     }
  38. }
  1. .btnArea {
  2.   display: flex;
  3.   width: 100%;
  4.   height: 50px;
  5.  margin-top: 15px;
  6. align-items: center;
  7.   justify-content: space-evenly;
  8. }

添加add

  1. //add.jsx
  2. import React, { Component } from 'react'
  3. import Buttons from "../Buttons"
  4. import { Input,Row ,Col  } from 'antd';
  5. import './index.css'
  6. import PubSub from 'pubsub-js' 
  7. import {nanoid} from 'nanoid'
  8. export default class index extends Component {
  9.  state={
  10.      add:'增加',
  11.      value:''
  12.  }
  13.  addHandle=()=>{
  14.       let NewObj= {id:nanoid(),title:this.state.value,state:0,num:1,btn:'删除'}
  15.        PubSub.publish('NewObj',NewObj) //发布消息
  16.        this.setState({
  17.            value:''
  18.        })
  19.  }
  20.  changeHandle=(e)=>{
  21.      this.setState({
  22.          value:e.target.value
  23.      })
  25.  }
  26.     render() {
  27.         const {add,value}=this.state
  28.         return (
  29.             <div className='inputAdd'>
  30.             <Row>
  31.             <Col span={5}>
  32.             </Col>
  33.             <Col span={12}>
  34.             <Input placeholder="请输入搜索内容" value={value} onChange={this.changeHandle}/>
  35.             </Col>
  36.             <Col span={2}>
  37.             <Buttons btnTitle={add} addHandle={this.addHandle}></Buttons>
  38.             </Col>
  41.             </Row>
  43.             </div>
  44.         )
  45.     }
  1. .inputAdd{
  2.     margin-top: 20px;
  3. }

安装依赖

  1. //antd
  2. yarn add antd
  3. //nanoid生成随机id
  4. yarn add nanoid
  5. //添加发布订阅
  6. yanrn add pubsub-js
  7. //类型校验
  8. yarn add prop-types

效果演示

20210407_160941.mp4 (1.89MB)