React小案例todoList

import React, { Component, createRef } from "react";
class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            list: [
                { title: "文丁响", done: true, state: 1 },
                { title: "王志悦", done: false, state: 1 }
            ]
        }
        // 创建一个dom引用
        this.myref = createRef();
    }
    addList = () =>{
        var list = this.state.list;
        list.unshift({title:this.myref.current.value,done:false,state:1})
        this.setState({list})
        this.myref.current.value = ''
    }
    delList = (item) =>{
        var list = this.state.list;
        var ind = list.findIndex(value => value.title === item.title)
        list.splice(ind,1)
        this.setState({list})
    }
    updateList = (item) =>{
        var list = this.state.list;
        var ind = list.findIndex(value => value.title === item.title)
        list[ind].done = !list[ind].done
        this.setState({list})
    }
    render() {
        var doneList = this.state.list.filter(item => item.done)
        var undoneList = this.state.list.filter(item => !item.done)
        return (
            <div className="all">
                <p className="title">响悦列表</p>
                <span className="addheader">
                    <input ref={ this.myref } /><button onClick={this.addList}>添加</button>
                </span>
                <div className="rest">
                    <p>未完成任务</p>
                    {undoneList.map((item, index) =>
                        <div key={index} className="one">
                            <div>
                                <input type="checkbox" 
                                checked = {item.done}
                                onChange={() => {this.updateList(item)}} />
                                <span>{item.title}</span>
                            </div>
                            <button onClick={()=>this.delList(item)}>删除</button>
                        </div>
                    )}
                </div>
                <div className="rest">
                    <p>已完成任务</p>
                    {doneList.map((item, index) =>
                        <div key={index} className="one">
                           <div>
                                <input type="checkbox" checked = {item.done} onChange={() => {this.updateList(item)}} />
                                <span>{item.title}</span>
                           </div>
                            <button onClick={()=>this.delList(item)}>删除</button>
                        </div>
                    )}
                </div>
            </div>
        )
    }
}
export default App

index.css部分：

*{
  margin: 0;
 padding: 0;
}
body {
 background-image: url(../public/star-all.gif);
}
.all{
  width: 800px;
  height: 600px;
  /* background-image: url(../public/star-all.gif); */
  margin: 30px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title{
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 25px;
  color: lightcoral;
  font-weight: 600;
}
.addheader{
  display: inline-block;
  margin-bottom: 16px;
}
.addheader input{
  height: 26px;
  width: 200px;
  border: 0;
  outline: none;
  border-radius: 10px;
}
.addheader button{
  margin-left: 12px;
  padding: 6px;
  border-radius: 10px;
  background-color: #fff;
  color: lightsalmon;
  font-weight: 600;
}
.addheader input{
  padding-left: 10px;
  color: limegreen;
}
.rest{
  width: 255px;
}
.rest p{
  font-size: 20px;
  color: #fff;
  margin-bottom: 15px;
}
.rest .one{
  display: flex;
  justify-content: space-between;
  height: 30px;
  color: #fff;
}
.one>div>input{
  margin-right: 10px;
  line-height: 30px;
}
.one>button{
  border-radius: 5px;
  padding: 5px;
  color: red;
}

效果图

注释版本代码无CSS

// imrc 从react导入
import React, { Component, createRef } from 'react';
// ccc
class App extends Component {
  constructor(props) {
    super(props);

    this.state = { 
      list:[
        {title:"学习vue",done:true,state:1},
        {title:"学习react",done:false,state:1},
      ]
     };
     this.myref = createRef();
  }
  addList = () =>{
    // 获取现有状态list
    var list = this.state.list;
    // 添加一项，内容为input表单的值
    list.unshift( {title:this.myref.current.value,done:false,state:1} )
    // 更新state
    this.setState({list})
    // 清空文本框
    this.myref.current.value = "";
  }
  delList = (item) =>{
    // 获取现有状态的list
    var list = this.state.list;
    // 根据item的title查出在list列表是第几个
    var ind = list.findIndex(value => value.title ===item.title );
    // 删除一个
    list.splice(ind,1)
    // 更新state的list值 同时自动更新视图
    this.setState({list})
  }
  updateList = (item) =>{
    // 获取现有状态的list
    var list = this.state.list;
    // 根据item的title查出在list列表是第几个
    var ind = list.findIndex(value => value.title ===item.title );
    list[ind].done = !list[ind].done
    // 更新state的list值 同时自动更新视图
    this.setState({list})
  }
  render() { 
    // filter遍历并过滤数组，当回调函数返回 真保留
    var doneList = this.state.list.filter(item => item.done)
    var undoneList = this.state.list.filter(item => !item.done)
    return ( 
      <div>
        <h1>美妙清单</h1>
        <input ref={this.myref} /><button onClick={this.addList}>添加</button>
        <h3>未完成({undoneList.length})</h3>
        <div>
          {undoneList.map(
            (item,index) => 
            <div key={index}>
              <input checked={item.done} onChange={() => {this.updateList(item)}} type="checkbox" />
              <span>
                <span>{item.title}</span>
              </span>
              <button onClick={()=>this.delList(item)}>x</button>
            </div>
            )
          }
        </div>
        <h3>已完成({doneList.length})</h3>
        <div>
          {doneList.map((item,index) => 
            <div key={index}>
              <input type="checkbox" checked={item.done} onChange={() => {this.updateList(item)}} />
              <span>
                <span>{item.title}</span>
              </span>
              <button onClick={()=>this.delList(item)}>x</button>
            </div>
          )}
        </div>
      </div>
     );
  }
}
 
export default App