react ToDoList

ToDoList,用react写的一个简单版，总共分为四个组件，希望对大家有用

目录

效果图：

1.app.js页 

2.header组件

 

3.list组件

4.item组件

5.foot组件

 

 

 

---

 

效果图：

 

 

1.app.js页 

import React from "react";
// import Welcome from './component/Welcome'
// import Hello from './component/Hello'
import Header from './todolist/Header'
import List from './todolist/list'
import Foot from './todolist/Foot'
import './index.css'
import axios from "axios";
class app extends React.Component {
    state={
        todolist:[]
    }
    componentDidMount(){
      axios.get("/students").then(
        response=>console.log(response),
        err=>console.log(err)
      )
    }
    
    add=(todoobj)=>{
        console.log(todoobj,'dfuhsdfnks')
        let newtodolist = [todoobj,...this.state.todolist]
        this.setState({
            todolist:newtodolist
        })
        console.log(this.state.todolist)
    }
    render(){
        let {todolist} = this.state
        return (
            <div id="root">
            <div className="todo-container">
            <Header  addobj={this.add}></Header>
            <List todolist={todolist}></List>
            <Foot></Foot>
             </div>
            </div>
        )
    }
}

export default app;

2.header组件

import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import "./index.css"
import List from '../list'
import Foot from '../Foot'
export default class Header extends Component {
    state = {
        datalist: [],
        flag: false
    }
    add = (e) => {
        let val = e.target.value
        if (e.keyCode === 13 && val.trim()) {
            let newlist = [...this.state.datalist, {
                // id: Math.random() * 10000,
                id:nanoid(),
                title: val,
                done: false
            }]
            this.setState({
                datalist: newlist,
            })
            e.target.value = ''
        }
    }
    del(id) {
        this.setState({ datalist: this.state.datalist.filter(item => item.id !== id) })
    }
    changee(e, id) {
        this.setState({ datalist: this.state.datalist.map(item => item.id === id ? { ...item, done: e.target.checked } : item) })
    }
    delall() {
        this.setState({ datalist: this.state.datalist.filter(item => !item.done) })
    }
    allchange(e) {
        this.setState({
            flag: !this.state.flag,
            datalist: this.state.datalist.map(item => ({ ...item, done: !this.state.flag }))
        })
    }
    render() {
        let { datalist } = this.state;
        return (
            <div id="root">
                <div className="todo-container">
                    <div className="todo-wrap">
                        <div className="todo-header">
                            <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyDown={this.add} />
                        </div>
                        <List datalist={datalist} del={this.del.bind(this)}
                            changee={this.changee.bind(this)}
                        ></List>
                        <Foot allObject={
                            (() => {
                                // 假设
                                let num = 0;
                                // 假设全部选中，
                                // 他的值是根据datalist的长度  长度大于0则为true，等于0则为false，等于true时就是全部选中，
                                this.state.flag = datalist.length ? true : false
                                for (const iterator of datalist) {
                                    if (iterator.done) num += 1
                                    // 循环时有一个不为true，则直接修改控制全选的值
                                    if (!iterator.done) this.state.flag = false
                                }
                                return {
                                    num,
                                    flag: this.state.flag,
                                    total: datalist.length
                                }
                            })() // 自调用函数
                        } delall={this.delall.bind(this)} allchange={this.allchange.bind(this)}></Foot>
                    </div>
                </div>
            </div>
        )
    }
}

 

3.list组件

import React, { Component } from 'react'
import "./index.css"
import Item from "../item"
export default class List extends Component {
    constructor(props){
        super(props);
    }
  render() {
    let {datalist,del,changee}=this.props;
    return (
        <div>
       <Item datalist={datalist} del={del.bind(this)} changee={changee.bind(this)}></Item>
      </div>
    )
  }
}

4.item组件

import React, { Component } from 'react'
import "./index.css"

export default class Item extends Component {
    constructor(props){
        super(props);
    }
   
  render() {
    let {datalist,del,changee} = this.props
    // console.log('this.state.datalist :>> ', this.state.datalist);
    return (
        <ul className="todo-main">
       
       {datalist.map((item,index)=>{
        return ( <li key={index}>
            <label>
              <input type="checkbox" onChange={(e)=>{changee(e,item.id)}} checked={item.done}/>
              <span>{item.title}</span>
            </label>
            <button className="btn btn-danger" onClick={()=>{del(item.id)}} style={{display:'none'}}>删除</button>
          </li>)
       })}
      </ul>
    )
  }
 
}

5.foot组件

import React, { Component } from 'react'
import "./index.css"
export default class Foot extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        let { delall, allchange, allObject: {
            num,
            flag,
            total
        } } = this.props
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" checked={flag} onChange={(e) => { allchange(e) }} />
                </label>
                <span>
                    <span>已完成{num}</span> / 全部{total}
                </span>
                <button className="btn btn-danger" onClick={() => { delall() }}>清除已完成任务</button>
            </div>
        )
    }
}