• App.js ```javascript import React from ‘react’; import ‘./App.css’;

    class App extends React.Component { constructor(props) { super(props); this.state = { id: 1, list: [] } } render() { return (

    ToDoList

    正在进行 {this.uncomplete()}

    {this.state.list.map(item => { return (

    {item.name}

    ) })}

    已经完成 {this.complete()}

    {this.state.list.map(item => { return (

    {item.name}

    ) })}
    Copyright © 2019 todolist.cn
    ); } handleChange(e) { var list = this.state.list var id = this.state.id if (e.keyCode === 13) { if (e.target.value !== “”) { var obj = {} obj.name = e.target.value obj.id = id id = id + 1 obj.isTodo = false list.push(obj) this.setState({ list, id }) } e.target.value = “” } } handlecheck(id) { var list = this.state.list list.forEach(item => { if (item.id == id) { item.isTodo = !item.isTodo } }) this.setState({ list }) } handledel(id){ var list = this.state.list var num = list.findIndex(item=>{ if(item.id==id){ return true } }) list.splice(num,1) this.setState({ list }) } complete(){ var list = this.state.list var sum = list.filter(item=>{ if(item.isTodo){ return true } }) return sum.length } uncomplete(){ var list = this.state.list var sum = list.filter(item=>{ if(!item.isTodo){ return true } }) return sum.length }

    } export default App;

    2. - App.css
    3. ```css
    4. *{
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8. body{
    9.   background: #CDCDCD
    10. }
    11. .logo {
    12.   color: #fff;
    13.   font-size: 24px;
    14. }
    15. .nav {
    16.   background: #323232;
    17.   height: 50px;
    18. }
    19. .nav-row {
    20.   width: 600px;
    21.   margin: 0 auto;
    22.   display: flex;
    23.   align-items: center;
    24.   height: 50px;
    25.   justify-content: space-between;
    26. }
    27. .nav input {
    28.   height: 23px;
    29.   width: 350px;
    30.   border-radius: 5px;
    31.   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
    32.     0 1px 6px rgba(0, 0, 0, 0.45) inset;
    33.   border: none;
    34.   padding-left: 10px;
    35.   outline: none;
    36. }
    37. .content {
    38.   width: 600px;
    39.   margin: 0 auto;
    40. }
    41. .content-nav {
    42.   display: flex;
    43.   justify-content: space-between;
    44.   font-size: 25px;
    45.   font-weight: bold;
    46.   margin: 20px 0;
    47.   align-items: center;
    48. }
    49. .content-nav span {
    50.   font-size: 14px;
    51.   width: 20px;
    52.   height: 20px;
    53.   background: rgb(238, 236, 236);
    54.   border-radius: 10px;
    55.   text-align: center;
    56.   line-height: 20px;
    57. }
    58. .iconfont {
    59.   color: #cccccc;
    60.   cursor: pointer;
    61. }
    62. .list {
    63.   background: #fff;
    64.   display: flex;
    65.   justify-content: space-around;
    66.   height: 32px;
    67.   align-items: center;
    68.   border-radius: 5px;
    69.   border-left: 5px solid #629a9c;
    70.   margin-bottom: 10px;
    71. }
    72. .content input {
    73.   width: 22px;
    74.   height: 22px;
    75.   cursor: pointer;
    76. }
    77. .text {
    78.   width: 505px;
    79.   overflow: hidden;
    80.   white-space: nowrap;
    81.   text-overflow: ellipsis;
    82. }
    83. .foot {
    84.   text-align: center;
    85.   color: #666;
    86. }
    87. .list-complete {
    88.   opacity: 0.3;
    89.   border-left: 5px solid #666;
    90. }