首先要有一定的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:false
};
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; //arr
let show =!this.state.show //true
list4.forEach((v)=>{
v.done=show
})
this.setState({list:list4,show})
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;
网友评论