用React实现简易的todolist

阅读更多

断断续续的学习了一段时间的React，觉得要写点什么练练手。就写了一个非常简单的TodoList，实现很简单，不多做赘述

效果图：

代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import '../css/style.css';

class TodoBox extends React.Component{
    constructor(props){
        super(props);
        this.state={
            data: [
                {"id": "0001", "task":"吃饭", "complete": "false"},
                {"id": "0002", "task":"睡觉", "complete": "false"},
                {"id": "0003", "task":"打豆豆", "complete": "true"},
            ]
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleTaskDelete = this.handleTaskDelete.bind(this);
        this.handleToggleComplete = this.handleToggleComplete.bind(this);
    }
    // 给新增的任务一个随机的id
    generateId(){
      return Math.floor(Math.random() * 9000) + 1000;
    }
    handleSubmit(task){
        let data = this.state.data;
        let id = this.generateId();
        let complete = "false";
        data = data.concat([{"id": id, "task": task, "complete": "false"}]);
        this.setState({data});
    }
    // 切换选中状态
    handleToggleComplete(taskId){
        let data = this.state.data;
        for(let i in data){
            if(data[i].id === taskId){
                data[i].complete = data[i].complete=='true'?'false':'true';
                break
            }
        }
        this.setState({data});
    }
    // 根据 id 删除一项任务
    handleTaskDelete(taskId){
        let data = this.state.data;
        data = data.filter(task=>
            task.id !== taskId
        )
        this.setState({data})
    }
    render(){
        let statistics = {
            todoCount: this.state.data.length||0,
            todoCompleteCount:this.state.data.filter((item)=>
                item.complete === "true"
            ).length
        }
        return(
            

                
                
            
        )
    }
}

class TodoList extends React.Component{
    render(){
        let taskList = this.props.data.map((listItem)=>{
            return(
                
            )
        })

        return(
            

                {taskList}
                
            
        )
    }
}

class TodoItem extends React.Component{
    constructor(props){
        super(props);
        this.deleteTask = this.deleteTask.bind(this)
        this.handleMouseOver = this.handleMouseOver.bind(this)
        this.handleMouseOut = this.handleMouseOut.bind(this)
        this.toggleComplete = this.toggleComplete.bind(this)
    }
    // 是否选中状态
    toggleComplete(){
        this.props.toggleComplete(this.props.taskId);
    }
    // 鼠标移入显示删除按钮
    handleMouseOver() {
        this.refs.deleteBtn.style.display = "inline";
    }
    handleMouseOut() {
        this.refs.deleteBtn.style.display = "none";
    }
    deleteTask(){
        this.props.deleteTask(this.props.taskId);
    }
    render(){
        let task = this.props.task;
        let itemCheck;
        if(this.props.complete==='true'){
            task = {task}
            itemCheck = true;
        }else{
            itemCheck = false;
        }
        return(
            

                {task}删除
            
        )
    }
}

class TodoFooter extends React.Component{
    render(){
        return(
            
{this.props.todoCompleteCount}已完成 / {this.props.todoCount}总数
        )
    }
}

class TodoForm extends React.Component{
    constructor(props){
        super(props);
        this.submitTask = this.submitTask.bind(this);
    }
    submitTask(e){
        e.preventDefault();
        let task = this.refs.task.value.trim();
        if(!task){
            return;
        }
        this.props.submitTask(task);
        this.refs.task.value="";
    }
    render(){
        return(
            

                

                

                    

                        
                        
                    
                
            
        )
    }
}

ReactDOM.render(
    ,document.getElementById("root")
)

 

转载于:https://my.oschina.net/u/3340589/blog/1611786