react——一个todolist的demo

代码如下:

function ToDoListHeader(props) {
    return <h1 className={props.className}>ToDoList</h1>
}
class CheckAll extends Component{
    changeAll(event){
        this.props.selectedChange(‘all‘,event.target.checked);
    }
    batchDel(){
        this.props.batchDel();
    }
    render(){
        if(this.props.totalLen > 0){
            return <div className="ctr">
                <label htmlFor="all">
                    <input type="checkbox" id="all" onChange={this.changeAll.bind(this)} checked={this.props.totalLen <= this.props.selectedLen}/>
                    {this.props.totalLen <= this.props.selectedLen ? ‘取消全选‘ :‘全选‘}
                </label>
                <span className="batchDel" onClick={this.batchDel.bind(this)}>批量删除</span>
            </div>
        } else {
            return null;
        }
    }
}
class InputBox extends Component{
    constructor(props){
        super(props);
        this.state = {
            value:‘‘
        }
    }
    handleKeyDown(event){
        if(event.keyCode === 13 && this.state.value.replace(/\s/g,‘‘).length > 0){
            this.setState({
                value:‘‘
            });
            this.props.addToDoList(this.state.value);
        }
    }
    handleChange(event){
        this.setState({
            value:event.target.value
        })
    }
    render(){
        return (
            <from className="inputBox">
                <input type="text" className="input" value={this.state.value} onKeyDown={this.handleKeyDown.bind(this)} onChange={this.handleChange.bind(this)} placeholder="请输入..."/>
                <CheckAll totalLen={this.props.totalLen} selectedChange={this.props.selectedChange} selectedLen={this.props.selectedLen} batchDel={this.props.batchDel}/>
            </from>
        )
    }
}
class ToDoItem extends Component{
    delItem(){
        this.props.delToDoItem(this.props.index);
    }
    changeCheck(event){
        this.props.changeCheck(this.props.index,event.target.checked);
    }
    render(){
        return <li>
            <input type="checkbox" onChange={this.changeCheck.bind(this)} checked={this.props.checked}/>
             <span>{this.props.label}</span>
            <span className="del" onClick={this.delItem.bind(this)}>X</span>
            </li>
    }
}
class ToDoList extends Component{
    render(){
        const listItem = Object.keys(this.props.listItems).map((key) => {
            return <ToDoItem label={this.props.listItems[key]} key={key} index={key} delToDoItem={this.props.delToDoItem} changeCheck={this.props.changeCheck} checked={this.props.selectedList[key]}/>
        });
        return <ul className="list">{listItem}</ul>
    }
}
function ListFooter(props) {
    return <span className="info">一共{props.length}条</span>
}
class ToDoListBox extends Component{
    constructor(props){
        super(props);
        this.state = {
            // 列表
            list:{},
            // 被选中的列表项 {0:true,1:true}
            selectedList:{}
        }
    }
    // 向列表中添加条目
    addToDoList(item){
        this.setState((prevState) => {
            // 保证列表中的key不会重复
            const keys = Object.keys(prevState.list).sort();
            const nextKey = keys.length > 0 ? keys[keys.length-1] * 1 + 1 : 0;
            const list = Object.assign(prevState.list,{[nextKey]:item});
            return {
                list:list
            }
        })
    }
    // 从列表中删除条目
    delToDoItem(index){
        this.setState((prevSate) => {
            delete prevSate.list[index];
            return {
                list:prevSate.list
            }
        });
        this.selectedChange(index,false)
    }
    // 批量删除
    batchDel(){
       Object.keys(this.state.selectedList).forEach((key) => {
           this.delToDoItem(key);
           this.selectedChange(key,false);
       })
    }
    selectedChange(key,checked){
        // 取消全选
      if(key === ‘all‘ && !checked){
          this.setState({
              selectedList:{}
          });
          return;
      }
      // 全选
      if(key === ‘all‘ && checked){
         const list = this.state.list;
         let selectObj = {};
         Object.keys(list).forEach((key) => {
             selectObj[key] = true
         });
          this.setState({
              selectedList:selectObj
          });
          return;
      }
      // 选择或取消选择某一个
      this.setState((prevState) => {
          if(checked && !prevState.selectedList[key]){
              return {
                  selectedList:Object.assign(prevState.selectedList,{[key]:true})
              }
          }
          if(!checked && prevState.selectedList[key]){
              delete prevState.selectedList[key];
              return {
                  selectedList:prevState.selectedList
              }
          }
      })
    }
    render(){
        const selectedLen = Object.keys(this.state.selectedList).length;
        const listLen = Object.keys(this.state.list).length
        return (
            <div>
                <InputBox
                    addToDoList={this.addToDoList.bind(this)} totalLen={listLen}
                    selectedLen={selectedLen} selectedChange={this.selectedChange.bind(this)} batchDel={this.batchDel.bind(this)}/>
                <ToDoList listItems={this.state.list} delToDoItem={this.delToDoItem.bind(this)} changeCheck={this.selectedChange.bind(this)} selectedList={this.state.selectedList}/>
                <ListFooter length={listLen}/>
            </div>
        )
    }
}
class App extends Component {
  render() {
    return (
        <div className="warp">
            <logo/>
            <ToDoListHeader className="header"/>
            <ToDoListBox/>
        </div>
    );
  }
}
时间: 2024-10-16 19:45:57

react——一个todolist的demo的相关文章

自己的第一个NDK的Demo

DEMO下载链接: http://download.csdn.net/detail/logicsboy/7535409 首先给你们恶补下啥是NDK:(我从百度Copy的) NDK全称:Native Development Kit. 1.NDK是一系列工具的集合. * NDK提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将so和java应用一起打包成apk.这些工具对开发者的帮助是巨大的.[1] * NDK集成了交叉编译器,并提供了相应的mk文件隔离平台.CPU.API等差

1.类的加载机制_继承类的加载(一个小的Demo)说明

今天我们先来一个小的Demo来了解类的加载顺序. 1 public class ClassLoaderTest { 2 public static void main(String[] args) { 3 System.out.println("*******************测试类的加载顺序开始*******************"); 4 new SubClass(); 5 System.out.println("*******************测试类的加载

【mvc学习】给小白们的第一个MVC学习Demo

首先用VS2012以上的VS创建一MVC网站,创建完后在解决方案视图应该有这些文件,我这里项目名称就叫taobao,你们可以自己取 加亮的地方是重点,也就是M-V-C,这时候默认已经可以运行了 大家可以右击,查看源代码,IE上好像叫查看源文件.会发现在已经引入的很多的JS,包括我们要用到的ajax请求的jquery,另外这个bootstrap是个好东西,用来布局网页,可以在PC和手机上使用一套界面,这个放后期我们再学习 <script src="/Scripts/jquery-1.10.2

使用TestStand默认ProcessModel--SequentialModel,快速搭建一个自定义过程模型Demo

TestStand 版本:2012 SP1 实现的的目标效果,如下图:使用TestStand默认ProcessModel--SequentialModel,快速搭建一个自定义过程模型Demo 步骤一: .准备工作 将TestStand ProcessModel 设置成--SequentialModel 设置Result Processing,这边启用Report记录  步骤二:  添加Model Callback 右击Sequence区域,选择Sequence File Callbacks,在出

react todoList小demo

基于create-react-app做的小demo 比较简单直接上代码 效果图 import React from 'react' import Input from '../../components/Input/index' import List from '../../components/List/index' class Todo extends React.Component{ constructor(props){ super(props) this.state={ todos:

React-TodoList

React入门最好的学习实例-TodoList 前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好好认识下这个东西.然后花时间自己写了一个demo:react-todos, 你可以先点这里去看react-todo react首先值得拍手称赞的是它所有的开发都基于一个组件(component),组件和组件之间传递方法,而且每个组件都有一个状态(sta

React之todo-list

基于React的一个简单Todo-list 先赌为快:在线DEMO,感觉还不错点一下star  -_- ~ 源码地址: 一.已经完成的功能 1.新增选项(默认未完成) 2.完成状态可以切换 3.当前选项可以删除 4.全部选项选中状态切换 5.全部个数,完成个数,未完成个数实时读取 6.刷新状态不变 二.待完成(新增路由) 三.目录结构 3.1.主要逻辑只涉及:Todo(父组件),TodoAdd(输入框子组件一),TodoList(选项列表子组件二) 3.2.父子组件通过props(可以是自定义属

1-2 Mobx 入门实践之TodoList(官方Demo)

第一步:导入模块 import React, { Component } from 'react'; import { observable, autorun,computed } from 'mobx' import {observer} from "mobx-react"; 第二步:创建store class ObservableTodoStore{    @observable todos = [];    @observable pendingRequests = 0;    

Vue.js基础篇实战--一个ToDoList小应用

距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 主要功能就是把一天要做的事情记录下来,还实现了: 标记完成事件 删除已完成事件 各种排序 仅显示未完成的项目 本地保存 截图看这里 用时一周,14次commits,把心中的构想基本实现了.详情请看:这里 整个过程下来,收获还是很多的, 1.对mvvm有了进一步的理解, 2.对css布局有了更多的了解. 3.更进一步理解了Vue的事件和组件机制.这些机制将应用解耦,每一部分都隔离出来