React基础练习-ToDoList

如下是学习了React的基础后，做的一个小练习。

import React, { Component } from 'react';
class ToDoList extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            defaultValue:'',
            list:[
                '跑跑卡丁车',
                '真三国无双',
                '穿越火线'
            ]
        }
        // this.inputChange = this.inputChange.bind(this);
        this.addList = this.addList.bind(this);
    }
    render() { 
        return (
            <div>
                <input value={this.state.defaultValue} onChange={this.inputChange.bind(this)}/><button onClick={this.addList}>添加游戏</button>
                <ul>
                    {
                        this.state.list.map((value,key)=>{
                        return <li key={key} onClick={this.deleteItem.bind(this,key)}>{value}</li>
                        })
                    }
                </ul>
            </div>
          );
    }
    inputChange(e){
        console.log(e.target.value)
        this.setState({
            defaultValue:e.target.value
        })
    }
    addList(e){
        let newList = this.state.list;
        newList.push(this.state.defaultValue);
        
        this.setState({
            list:newList,
            defaultValue:''
        })
    }
    deleteItem(index){
        let newList = this.state.list;
        newList.splice(index,1);
        this.setState({
            list:newList
        })
    }
}
 
export default ToDoList;