import React from 'react';

class TodoList extends React.Component {

    constructor(props){
        super(props);
        this.state={
            list:[],
            inputValue:''
        }
    }

    handleBtnClick(){
        this.setState({
            list:[...this.state.list,this.state.inputVlue],
            inputVlue: ''
        })
    }
    handleInputChange(e){
        this.setState({
            inputVlue:e.target.value
        })
    }

    render(){
        return (
            //jsx 语法
            <div>
                <div>
                    <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
                    <button onClick={this.handleBtnClick.bind(this)}>add</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,i)=>{
                          return <li key={i}>{item}</li>
                        })
                    }
                </ul>
            </div>
        );
    }

}

export default TodoList;