react示例 -todolist

通过create-react-app工具新建初始项目

命令create-react-app todo-list
进入目录 cd todo-list
启动 npm start
App.js文件代码如下。

TodoList

import React from 'react'

class App extends React.Component {
  //初始化
  constructor(props){
    super(props); 
    this.state = {
      todoList : [], //待办事项列表
      delindex : [] //被删除事项的index
    }
    this.addTodoList = this.addTodoList.bind(this) //新增待办事项
    this.delTodoList = this.delTodoList.bind(this) //删除待办事项
    this.doneTodoList= this.doneTodoList.bind(this) //完成待办事项
    this.backTodoList = this.backTodoList.bind(this) //找回全部删除事项
    this.oneTodoList = this.oneTodoList.bind(this) //找回上条删除事项
  }

  //新增待办事项
  addTodoList(event){ 
    if(event.keyCode === 13){ //用户回车才添加
      if(event.target.value=== '') {
        return null;
      }
      console.log('你回车了')
      console.log(event.target.value)
      let newTodoList = { //新的事项
        index : this.state.todoList.length,
        value : event.target.value,
        done :false,
        delete : false
      }
      //将新事项添加进待办事项
      // this.state.todoList.push(newTodoList) 
      this.setState({todoList:[...this.state.todoList,newTodoList]})

      event.target.value = '' //增加完后清空文本框
    }  
  }

  //将delete改成true，变相的隐藏事项
  delTodoList(event){
    console.log(event.target.name)
    // this.state.todoList.splice(event.target.name,1) 

    console.log(this.state.todoList[event.target.name])
    let todoList2 = this.state.todoList
    todoList2[event.target.name].delete = true //将delete改成true，表示被删除
    console.log(this.state.todoList[event.target.name])
    console.log(this.state.delindex)
    // 将被删除事项的下标添加到下标列表里
    this.state.delindex.push(event.target.name) 
    this.setState({todoList:todoList2})
    console.log(this.state.delindex)
  }

  //勾选事项，表示完成
  doneTodoList(event){
    console.log(event.target.name)
    //将该事项的done取反
    // this.state.todoList[event.target.name].done = !this.state.todoList[event.target.name].done
    let todoList2 = this.state.todoList
    todoList2[event.target.name].done = !todoList2[event.target.name].done
    
    console.log(todoList2)
    this.setState({todoList:todoList2})
  }

  //找回上一条删除事项
  oneTodoList(){
    if(this.state.delindex == '')return null;
    console.log(this.state.delindex.length-1)
    //将下标列表的最后一个下标的事项的delete改成false
    let todoList2 = this.state.todoList
    todoList2[this.state.delindex.length-1].delete = false
    this.setState({todoList:todoList2})
    this.state.delindex.pop() //删掉以找回事项在下标列表里的值
    
  }

  //一键找回删除事项
  backTodoList(){
    if(this.state.delindex == '')return null; //如果下标列表是空的，就不用找回
    let todoList2 = this.state.todoList
    console.log(this.state.todoList)
    todoList2.map(i =>{ //否则遍历全部事项，更改它们的delete为false
      return(i.delete = false)
      })

    this.setState({todoList:todoList2,delindex:[]})
    console.log(this.state.delindex)
  }
  

  render(){
    return(
      <div className='daiban'>
        <h2>
          TodoList
          </h2>
        <input value={this.state.text} onKeyUp={this.addTodoList} />
        <div className='doing'>
          <h3>正在进行</h3>
          <ul>
            {
              this.state.todoList.map((i,index) =>{
                if(i.delete)return null;
                if(i.done)return null;
                return(
                <li key={index}>
                  <input type="checkbox"  onChange={this.doneTodoList} name={i.index} className='box' />
                  {i.value}
                  <button onClick={this.delTodoList} name={i.index} className='del'>删除</button>
                  </li>)
              })          
            }
          </ul>
        </div>
        <div className='done'>
          <h3>已经完成</h3>
          <ul>
            {
              this.state.todoList.map((i,index) =>{
                if(i.delete)return null;
                if(i.done){ //如果完成了
                  return(
                    <li key={index}>
                    <input type='checkbox' onChange={this.doneTodoList} name={i.index} checked='checked' className='box'/>
                    {i.value}
                    <button onClick={this.delTodoList} name={i.index} className='del'>删除</button>
                  </li>
                  )
                }else return null; //否则没完成
              })
            }
          </ul>

        </div>
        
        <div className='footer'>
          <button onClick={this.oneTodoList} className='back'>找回上一条删除事项</button>
          <button onClick={this.backTodoList} className='back'>找回全部删除事项</button>
        </div>
      </div>
    );
  }
}

export default App;