混合应用开发 / 2018级React程序开发

import React, { Component } from 'react';
class Todo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { done: true, title: "学习vue" },
                { done: false, title: "学习React" }
            ]
            
        }
    }

    inputSel(item){
        let  list = this.state.list;
        let  ind = list.indexOf(item);标
        list[ind].done = !list[ind].done;
        this.setState({list}) 
    }
    addItem(e){
        if(e.keyCode!=13){return};
        let list = this.state.list; 
        list.unshift({done:false,title:e.target.value}); 
        this.setState({list})
        
        e.target.value = '';
    }
    delItem(item){
        let  list = this.state.list;
        let  ind = list.indexOf(item);
        list.splice(ind,1);
      
        this.setState({list});
    }
    render() {
        return (
            <div>
                <h1>美妙清单</h1>
                <input type="text" placeholder="添加计划" onKeyUp={e=>this.addItem(e)}/>
                <h3>未完成 {this.state.list.filter(item=>!item.done).length}</h3>
                <div className="list">
                    {
                        this.state.list.filter(item=>!item.done).map(item => 
                        <div key={item.title}>
                            <input type="checkbox" checked={item.done} onChange={this.inputSel.bind(this,item)} />
                            <span className="item-content">{item.title}</span> 
                            <button onClick={this.delItem.bind(this,item)}>×</button>
                        </div>)
                        
                    }
                    
                </div>
                <h3>已完成 {this.state.list.filter(item=>item.done).length}</h3>
                <div className="list">
                    {
                        this.state.list.filter(item=>item.done).map(item => 
                        <div key={item.title}>
                            <input type="checkbox" checked={item.done} onChange={this.inputSel.bind(this,item)} />
                            <span className="item-content">{item.title}</span> 
                            <button onClick={this.delItem.bind(this,item)}>×</button>
                        </div>)
                    }
                   
                </div>
            </div>
        );
    }
   
    componentDidMount(){
        var str = localStorage.getItem("list")||"[]";
      
        var list = JSON.parse(str);
        this.setState({list}) 
    }
    componentDidUpdate(prevProps,prevState){
        localStorage.setItem("list",JSON.stringify(this.state.list))
        
    }
}

export default Todo;

import React,{Component} from 'react';
import Todo from './component/Todo.js'

class App extends Component{

  constructor(props){
    super(props);
   
    this.state = { num:1 }
    
  }
  
  render() {
    return (
      <div >
         <Todo></Todo>
      </div>
    );
  }
}


export default App;