本文共 4651 字，大约阅读时间需要 15 分钟。

app.js

import React from 'react'import TodoMain from './components/TodoMain';import TodoHeader from './components/TodoHeader';import TodoFooter from './components/TodoFooter';class App extends React.Component{
      constructor(props){
       super(props)    this.state = {
         todos:[],      isAllChecked:false    }   }    addTodo = (todoItem)=>{
         this.state.todos.push(todoItem)      //       this.setState({
           todos:this.state.todos      })    }    deleteTodo = (index)=>{
         this.state.todos.splice(index,1)      this.setState({
           todos:this.state.todos      })    }    changeTodoState = (index,isDone)=>{
         this.state.todos[index].isDone = isDone      let isAllChecked = false      if(this.state.todos.every(todo=>todo.isDone)){
           isAllChecked = true      }      this.setState({
           todos:this.state.todos,        isAllChecked      })    }    changeTodoStateAll = (isDone) =>{
         this.setState({
           todos:this.state.todos.map((todo)=>{
             todo.isDone = isDone;          return todo        }),        isAllChecked:isDone      })    }    clearDone = ()=>{
         //       let todos = this.state.todos.filter(todo=>!todo.isDone)      this.setState({
           todos,        isAllChecked:false      })    }    render(){
           const {
   todos,isAllChecked} = this.state;        let info = {
             todoCount:todos.length || 0,          todos,          todoDoneCount:(todos && todos.filter((todo)=>todo.isDone)).length || 0,          isAllChecked        }         return(          
   
                
                    
                    
              
   
        );    }}export default App;

todomain.js

import React from 'react';import TodoItem from './TodoItem';export default  class TodoMain extends React.Component{
       render() {
           const {
   todos,todoCount,todoDoneCount} = this.props        if(todos.length == 0){
               return 
   
                    恭喜你没有代办事项            
   
        }else{
               return (                
   
                        {
                           todos.map((todo,index)=>{
                               return 
                            })                    }                    
    
                                                  {
   todoCount}总数/{
   todoDoneCount}已完成                                            
                
   
            )        }                 }}

todoitem

import React from 'react';export default class TodoItem extends React.Component{
       state = {
           isShow:false    }    handelMouseOver = ()=>{
           this.setState({
               isShow:true        })    }    handelMouseOut = ()=>{
           this.setState({
               isShow:false        })    }    handelDelete = ()=>{
           this.props.deleteTodo(this.props.index)    }    handelChange = ()=>{
           let isDone = !this.props.isDone;        this.props.changeTodoState(this.props.index,isDone)    }    render(){
           const {
   isShow} = this.state        const {
   text,isDone} = this.props        const taskDone = isDone ? "task-done" : ''        return(            
                                                           {
   text}                                 
    
                    
     删除                
    
            
        )    }}

todoheader.js

import React from 'react';class TodoHeader extends React.Component{
       handelKeyUp = (e)=>{
           // 获取input的值        if(e.keyCode == 13){
               let value = e.target.value;            if(!value) return false            let newTodoItem = {
                   text:value,                isDone:false            }            e.target.value = ''            // 调用父组件传过来的方法            this.props.addTodo(newTodoItem)        }            }    render() {
           return(            
   
                
    
React Todo
                
    
                    
     
                    
      Task                    
      
                      
                           
      
                    
     
                
    
            
   
        )    }};export default TodoHeader;

todofooter.js

import React from 'react';export default class TodoFooter extends React.Component{
       handelSelectAll = (e)=>{
           this.props.changeTodoStateAll(e.target.checked)    }    handelDeleteDone = ()=>{
           this.props.clearDone()    }    render(){
               return(                
   
                    
                            全选                                        
    
                        
     清除已完成任务                    
    
                
   
            )    }}

转载地址：https://codeboy.blog.csdn.net/article/details/107598494 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！