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;