var React = require("react");
var ReactDOM = require("react-dom");
var Header = require("./page/Header.jsx");
var Footer = require("./page/Footer.jsx");
var Timer = require("./component/Timer.jsx");
var Todolist = require("./component/TodoList.jsx")
class Main extends React.Component{
constructor(){
super();
this.state = {
todolist:"",
}
}
handlerOnChange(event){
this.setState({
todolist:event.target.value
})
}
handKeydown(event){
/*如果键盘码等于13,说明是回车键*/
if (event.keyCode!=13) {
return;
};
var val = this.state.todolist.trim();
if (val) {
/*调用子组件的方法并传值*/
this.refs.aa.onAdd(val);
}
}
render(){
let self = this;
return(
<div>
<h1>任务列表</h1>
<input type="text" onChange={this.handlerOnChange.bind(this)}
onKeyDown={this.handKeydown.bind(this)}
/>
<Todolist ref="aa"/>
</div>
)
}
}
ReactDOM.render(<Main/>,document.getElementById("uuu"));
var React = require("react");
var ReactDOM = require("react-dom");
/*这只是子组件*/
/*这个是设置的自动增长ID*/
var ids=0;
class todolist extends React.Component{
constructor(){
super();
this.state={
/*存储任务的数组*/
arr:[],
/*完成任务数的记录变量*/
wancheng:0,
/*未完成。。。*/
weiwan:0,
/*span样式名的记录变量*/
className12:"todolist_li",
}
}
/*增加任务的方法,有父组件index.jsx用refs调用传值val*/
/*val是input任务输入框的value*/
onAdd(val){
this.state.arr.push({title:val,completed:false,id:ids++,bol:true})
this.setState(this.state);
this.state.zongshu=(this.state.arr).length;
this.state.weiwan=this.state.zongshu-this.state.wancheng
}
/*checkbox的触发事件,该事件把标记完成是否的completed属性反转*/
onCheck(event){
/*首先获取CheckBox的value值也就是index数组下标*/
let index = event.target.value;
/*把标记取反,用来改变记录,等下用来标记span的样式*/
this.state.arr[index].completed=!(this.state.arr[index].completed);
// this.setState(this.state);
// console.log(this.state.arr)
/*记录未完成和完成的个数*/
/*假如是完成了的*/
if(this.state.arr[index].completed){
/*那它的完成数就在基础上加一*/
this.state.wancheng=this.state.wancheng+1;
/*任务总数减完成数=未完成数*/
this.state.weiwan=this.state.arr.length-this.state.wancheng
}else{
/*反之,假如已将被选为完成,那么就标记为未完成*/
/*重新记录未完成个数*/
this.state.wancheng=this.state.wancheng-1;
this.state.weiwan=this.state.arr.length-this.state.wancheng
}
/*更新该数据,它会自动调用render方法重新把值渲染到视图*/
this.setState(this.state)
}
/*删除任务方法*/
deleteVal(){
/*把原来的方法备份*/
let arr = this.state.arr;
/*从屁股删起删除*/
for(let i=arr.length-1;i>=0;i--){
/*假如标记为true,代表已完成,就干掉他*/
if (arr[i].completed) {
/*splice删除方法,第一个参数是从第几位开始删,删几条*/
this.state.arr.splice(i,1);
}
/*把完成的任务数归零*/
this.state.wancheng=0;
/*重新计算未完成数*/
this.state.weiwan=this.state.arr.length-this.state.wancheng
}
/*视图重新渲染*/
this.setState(this.state)
}
/*转换显示span和输入input的方法*/
onInput(event){
/*触发该方法,可以通过以下的方法获取到DOM对象本体obj*/
event = event ? event : window.event;
var obj = event.srcElement ? event.srcElement : event.target;
//这时obj就是触发事件的对象,可以使用它的各个属性
//还可以将obj转换成jquery对象,方便选用其他元素
/*这个obj就是触发方法的span或者input*/
/*然后获取它的同级上一个元素,就是checkbox DOM节点,该节点记录了该list的index下标*/
let index = obj.previousSibling.value
/*获取该下表的bol标记,并取反*/
let bol = !(this.state.arr[index].bol);
/*重新设置该属性为原来的反值*/
this.state.arr[index].bol=bol;
/*重新渲染*/
this.setState(this.state)
// console.log(this.state.arr[index].bol);
}
/*这个方法是让改变后的input可以以改变item.title的值调用的是onChange方法*/
onInputChange(event){
/*同样跟上面一样,获取到该对象,然后获取上一个DOM,然后获取index*/
event = event ? event : window.event;
var obj = event.srcElement ? event.srcElement : event.target;
let index = obj.previousSibling.value
/*把当前的值赋给原来的title内容*/
this.state.arr[index].title = event.target.value;
/*重新渲染*/
this.setState(this.state)
// console.log(event.target.value)
}
/*渲染方法*/
render(){
/*存储数组用map循环遍历之后的值*/
var todos = null;
/*把arr遍历*/
todos = this.state.arr.map(
(item,index)=>{
/*model是存储返回span和input的变量*/
let model;
/*如果他的值为true就返回span,否则返回input*/
if(item.bol){
/*这里span引用了三元表达式,根据completed属性来判断给文字加上什么样式*/
model = <span onClick={this.onInput.bind(this)} className={(item.completed)?"change":"sapn1"}>{item.title}</span>
}else{
model = <input onBlur={this.onInput.bind(this)} onChange={this.onInputChange.bind(this)} type="text" value={item.title}/>
}
/*返回渲染后的样式加数据*/
return <li key={item.id}>
<input type="checkbox" value={index} onChange={this.onCheck.bind(this)}/>
{model}
</li>
}
)
/*这个才是渲染的方法*/
return(
<div>
<ul id="ul1" className="todolist_li">
{todos}
</ul>
<p>完成了{this.state.wancheng}个任务,还有{this.state.weiwan}个未完成<span onClick={this.deleteVal.bind(this)}>【完成】</span></p>
</div>
)
todos="";
}
}
module.exports = todolist;