react 做的简易todolist

Posted 2020-12-01 zhangmr

首先要有一定的react的基础，里面的一些不做解释（包括项目文件的用法及作用）

  ### 1. 先安装react的插件

npm  install  create-react-app  -g     只需要安装一次即可

### 2. 下载react的脚手架

create-react-app    项目名（todo）

### 3.进入todo     启动项目或者运行的时候

可以   npm     start     或者下载  npm  install  yarn  --save------------>yarn     start     也可以启动

### 4. 创建一个App 文件夹     把App.js 和App.css都放到里面

### 5. 在index.js 中 引入App.js 的路径修改一下   

                 import App from ‘./App/App‘;

### 6. 创建一个文件夹（to）  里面在新建一个to.js 文件  快捷键rcc     con

### 7. 在App.ja 中引入 

 

import To from "../todo/to";

<To></To>

 

### 8 . 在to.js 中编写

import React, {Component} from ‘react‘;

class To extends Component {
    constructor(props){
        super(props);
        this.state={//初始化状态
            title:"",//通过他来获取用户的数据，并传递给list
            list:[]//创建一个空数组，储存数据，添加
            // show:true
        };
        this.ch=this.ch.bind(this);//实现修改this的指向
        this.add=this.add.bind(this);//实现修改this的指向
    }
    ch(e){//获取输入框内，用户输入的内容
       this.setState({title:e.target.value});
    }
    add(){//点击添加按钮，添加数据
        // alert(this.state.title);
        var list=this.state.list;
        var a=this.state.title;
        var t={
            tt:a,
            done:false,
            ss:true
        }
        list.push(t);
        this.setState({list,title:""})//更新后的状态
    }
    del(n){//点击删除按钮，删除数据
        var list1=this.state.list;
        list1.splice(n,1);
        this.setState({list:list1})
    }
    ck(n){//点击多选框，实现完成与未完成的切换效果
        var list2=this.state.list;
        list2[n].done=!list2[n].done;
        this.setState({list:list2})
    }
    sl(n){//实现数量，每添加一条数据或者完成一项，会显示不同的数据
        var list3=this.state.list;
        var s=0;
        list3.forEach((v,i,a)=>{
            if(v.done){
                s++
            }
        });
        return s;
    }
    da(){//实现点击全选与全不选之间的来回切换效果    有点问题*****
        // var list4=this.state.list;
        // // alert(list4);
        // list4.map((v,i,a)=>{
        //     if(!v.done==v.done){
        //        v.done=!v.done
        //     }else{
        //         v.done=!v.done
        //     }
        //     return v
        // })
        // this.setState({list:list4})
        var list=this.state.list;
        list.map((v,i)=>{
            var s = v.done;
            s=!s
            v.done = s;
            this.setState({s:!s})
           // v.done=!v.done
           //  this.setState({list})
        })

    }
    dd(n){
        var list=this.state.list;
        list[n].ss=!list[n].ss;
        this.setState({list});
    }
    ds(n){
        var list=this.state.list;
        list[n].ss=!list[n].ss;
        this.setState({list});
    }
    cc(n,event){//事件的参数都放到最后
        var list=this.state.list;
        list[n].tt=event.target.value;
        this.setState({list});
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.title} onChange={this.ch}/>
                <button onClick={this.add}>添加</button>
                <h3>未完成{this.state.list.length-this.sl()}</h3>
                <ul>
                    {

                        this.state.list.map((v,i,a)=>{
                            if(!v.done){
                        return <li key={i}>
                        <input type="checkbox" onClick={this.ck.bind(this,i)} defaultChecked={v.done}/>

                        <span style={{display:v.ss?"inline-block":"none"}} onClick={this.dd.bind(this,i)} >{v.tt}</span>
                            <input type="text" style={{display:!v.ss?"inline-block":"none"}} onBlur={this.ds.bind(this,i)} value={v.tt} onChange={this.cc.bind(this,i)}/>

                        <input type="button" value="删除" onClick={this.del.bind(this,i)}/>
                        </li>
                    }
                        })
                    }
                </ul>
                <h3>已完成{this.sl()}</h3>
                <ol>
                    {

                        this.state.list.map((v,i,a)=>{
                            if(v.done){
                                return <li key={i}>
                                    <input type="checkbox" onClick={this.ck.bind(this,i)} defaultChecked={v.done}/>
                                    {v.tt}
                                    <input type="button" value="删除" onClick={this.del.bind(this,i)}/>
                                </li>
                            }
                        })
                    }
                </ol>
                <input type="button" value="全选/全不选" onClick={this.da.bind(this)}/>
            </div>
        );
    }
}

export default To;