一、UI界面

ui.png

1、解决样式命名空间重复的问题

1-1、安装依赖

  1. yarn add styled-components

1-2、新建样式组件

  1. //components/AppStyle.js
  2. import styled from 'styled-components';
  3. const Wrap = styled.div`
  4.   width:100%;
  5. `;
  6. export default Wrap;

1-3、引入antDesign

  1. yarn add antd
  2. import "antd/dist/antd.css";

2、界面及样式

  1. //App.js
  2. import React, { Component } from 'react';
  3. //引入样式
  4. import Wrap from './components/AppStyle';
  5. import { Input } from 'antd';
  6. class App extends Component {
  7.   constructor(props){
  8.     super(props);
  9.     this.state = {
  11.     }
  12.   }
  13.   render() {
  14.     return (
  15.       <Wrap>
  16.         <div className="head">
  17.           <div className="logo-add center">
  18.             <p className="logo">ToDoList</p>
  19.             <Input className="add" size='small' placeholder="添加ToDo" />
  20.           </div>
  21.         </div>
  22.         <div className="content center">
  23.           <div className="todoing">
  24.             <div className="head-count">
  25.               <h2>正在进行</h2>
  26.               <span className="todocount">1</span>
  27.             </div>
  28.             <ol className="todolist">
  29.               <li>
  30.                 <input type="checkbox" />
  31.                 <p className="list">Html</p>
  32.                 <a href="#" className="del">-</a>
  33.               </li>
  34.             </ol>
  35.           </div>
  36.           <div className="todone">
  37.             <div className="head-count">
  38.               <h2>已经完成</h2>
  39.               <span className="todocount">1</span>
  40.             </div>
  41.             <ol className="todolist todolistStyle">
  42.               <li>
  43.                 <input type="checkbox" />
  44.                 <p className="list">css</p>
  45.                 <a href="#" className="del">-</a>
  46.               </li>
  47.             </ol>
  48.           </div>
  49.         </div>
  50.       </Wrap>
  51.     );
  52.   }
  53. }
  55. export default App;
  1. //components/AppStyle.js
  2. import styled from 'styled-components';
  3. const Wrap = styled.div`
  4.     width: 100%;
  5.     position: fixed;
  6.     left: 0;
  7.     right: 0;
  8.     top: 0;
  9.     bottom: 0;
  10.     background-color: #CDCDCD;
  11.     .center{
  12.         width: 600px;
  13.     }
  14.     .head{
  15.         width: 100%;
  16.         height: 50px;
  17.         background-color: #323232;
  18.         position: relative;
  19.     }
  20.     .logo-add{
  21.         height: 50px;
  22.         line-height: 50px;
  23.         position: absolute;
  24.         left: 50%;
  25.         transform: translateX(-50%);
  26.         display: flex;
  27.         justify-content: space-between;
  28.         align-items:center;
  29.     }
  30.     .logo{
  31.         width: 100px;
  32.         line-height: 50px;
  33.         margin:0;
  34.         color: #DDD;
  35.         font-size: 24px;
  36.         cursor: pointer;
  37.         font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  38.     }
  39.     .add{
  40.         width: 360px;
  41.         text-indent: 10px;
  42.     }
  43.     .add,.addBtn{
  44.         height: 24px;
  45.         line-height:24px;
  46.         border-radius: 5px;
  47.         box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
  48.         border: none;
  49.         outline: none;
  50.     }
  51.     .content{
  52.         position: absolute;
  53.         left: 50%;
  54.         transform: translateX(-50%);
  55.     }
  56.     .head-count{
  57.         height: 31px;
  58.         display: flex;
  59.         justify-content: space-between;
  60.         align-items: center;
  61.         margin: 20px 0;
  62.     }
  63.     .head-count h2{
  64.         font-weight: 800;
  65.     }
  66.     .todocount{
  67.         padding: 0 5px;
  68.         height: 20px;
  69.         border-radius: 20px;
  70.         background: #E6E6FA;
  71.         line-height: 22px;
  72.         text-align: center;
  73.         color: #666;
  74.         font-size: 14px;
  75.         font-weight: bold;
  76.     }
  77.     .todolist{
  78.         padding:0;
  79.     }
  80.     .todolist li{
  81.         height: 32px;
  82.         line-height: 32px;
  83.         background: #fff;
  84.         position: relative;
  85.         margin-bottom: 10px;
  86.         border-radius: 3px;
  87.         border-left: 5px solid #629A9C;
  88.         box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  89.         list-style: none;
  90.         display: flex;
  91.         align-items: center;
  92.     }
  93.     input[type="checkbox"]{
  94.         background-color: initial;
  95.         -webkit-appearance: checkbox;
  96.         box-sizing: border-box;
  97.         margin: 3px 3px 3px 14px;
  98.         padding: initial;
  99.         border: initial;
  100.         width: 22px;
  101.         height: 22px;
  102.     }
  103.     .list{
  104.         width: 500px;
  105.         padding-left: 6px;
  106.         margin:0;
  107.         font-size:16px;
  108.     }
  109.     .del{
  110.         position: absolute;
  111.         right: 5px;
  112.         width: 24px;
  113.         height: 22px;
  114.         border-radius: 14px;
  115.         border: 6px double #FFF;
  116.         background: #CCC;
  117.         line-height: 14px;
  118.         text-align: center;
  119.         color: #FFF;
  120.         font-weight: bold;
  121.         font-size: 14px;
  122.     }
  123.     .todolistStyle li{
  124.         border-left: 5px solid #999;
  125.         background-color: #E6E6E6;
  126.     }
  127.     .todolistStyle .list{
  128.         color: #666;
  129.     }
  130.     .todolistStyle .del{
  131.         border: 6px double #E6E6E6;
  132.     }
  133. `;
  134. export default Wrap;

二、实现功能

1、添加ToDo

1-1、定义value,todoList,doneList

  1. constructor(props){
  2.   super(props);
  3.   this.state = {
  4.     value:'',
  5.     todoList:[],
  6.     doneList:[]
  7.   }
  8. }

1-2、循环数组，获取数组长度

  1. <span className="todocount">{this.state.todoList.length}</span>
  2. <ol className="todolist">
  3.   {this.state.todoList.map((item,index)=>{
  4.     return (
  5.       <li key={index}>
  6.         <input type="checkbox" checked={item.checked} />
  7.         <p className="list">{item.todo}</p>
  8.         <a className="del">-</a>
  9.       </li>
  10.          )
  11.     })}
  12. </ol>
  1. <span className="todocount">{this.state.doneList.length}</span>
  2. <ol className="todolist todolistStyle">
  3.   {this.state.doneList.map((item,index)=>{
  4.     return (
  5.       <li key={index}>
  6.           <input type="checkbox" checked="checked" />
  7.         <p className="list">{item.todo}</p>
  8.                 <a className="del" onClick={this.doneDel.bind(this,index)}>-</a>
  9.       </li>
  10.         )
  11.     })}
  12. </ol>

1-3、添加事件

  1. //App.js
  2. <Input className="add" size='small' onPressEnter={this.handlePressEnter} 
  3. value={this.state.value} placeholder="添加ToDo" onChange={this.handleKeyUp}/>

1-4、事件实现

  1. handleKeyUp=(event)=>{
  2.   this.setState({
  3.     value:event.target.value
  4.   })
  5. }
  6. handlePressEnter=(event)=>{
  7.   let todoObj = {
  8.     todo:this.state.value,
  9.     checked:false
  10.   }
  11.   if(event.keyCode == 13 && this.state.value !== ''){
  12.     this.state.todoList.push(todoObj)
  13.   }
  14.   this.setState({
  15.     todoList:this.state.todoList,
  16.     value:''
  17.   })
  18. }

2、状态切换

2-1、添加事件

  1. <input type="checkbox" onChange={this.onChangeTodo.bind(this,index)} checked={item.checked} />
  1. <input type="checkbox" onChange={this.onChangeDone.bind(this,index)} checked="checked" />

2-2、事件实现

  1. onChangeTodo=(index)=>{
  2.   this.state.doneList.push({todo:this.state.todoList[index].todo,checked:true})
  3.   this.state.todoList.splice(index,1)
  4.   this.setState({
  5.     doneList:this.state.doneList
  6.   })
  7. }
  1. onChangeDone=(index)=>{
  2.   this.state.todoList.push({todo:this.state.doneList[index].todo,checked:false})
  3.   this.state.doneList.splice(index,1)
  4.   this.setState({
  5.     todoList:this.state.todoList
  6.   })
  7. }

3、实现删除

3-1、添加删除事件

  1. <a className="del" onClick={this.todoDel.bind(this,index)}>-</a>
  1. <a className="del" onClick={this.doneDel.bind(this,index)}>-</a>

3-2、事件实现

  1. todoDel(index){
  2.   this.state.todoList.splice(index,1)
  3.   this.setState({
  4.     todoList:this.state.todoList
  5.   })
  6. }
  1. doneDel(index){
  2.   this.state.doneList.splice(index,1)
  3.   this.setState({
  4.     doneList:this.state.doneList
  5.   })
  6. }