import React, { Component } from 'react';
import './normalize.css'
import './App.css';
class App extends Component {
constructor(props){
super(props);
this.state = {current:'msg',list:[{name:'vue', done:false}, {name:'react', done:false}, {name:'angular', done:true}]}
}
changeHd(e){
// console.log(e.target.value);
this.setState({current:e.target.value})
// react 不会自动更新 手动设置 current的更新
}
addList(){
let oList = this.state.list;
oList.unshift({name:this.state.current, done:false});
this.setState({list:oList,current:''});
}
removeList(item){
let oList = this.state.list;
let index = oList.indexOf(item);
oList.splice(index, 1);
this.setState({list: oList});
}
doneList(item,flag){
let oList = this.state.list;
item.done = flag;
this.setState({list: oList});
}
render() {
return (
我的学习清单
未完成
{ this.state.list.map(
(item, index) => {
if(!item.done){
return (
-
{item.name}
)
}
}
)}
已完成
{ this.state.list.map(
// => 返回的内容
// =>() 返回的对象 jxs 格式 （）代表返回一个单一的节点
// =>{ 可以执行一些额为代码 return 返回内容}
(item, index) => {
if(item.done){
return (
-
{item.name}
)
}
}
)}
);
}
}
export default App;