import React, { Component, Fragment } from "react";

class TodoList extends Component {

  constructor(props) {

    super(props);

    this.state = {

      inputValue: "",

      list: [13, 123],

    };

  }

  render() {

    return (

      <Fragment>

        <div>

          <input

            value={this.state.inputValue}

            onChange={this.handleChange.bind(this)}

            // onFocus={this.handleFocus.bind(this)}

          ></input>

          <button onClick={this.handleBtn.bind(this)}>提交</button>

        </div>

        <ul>

          {this.state.list.map((item, index) => {

            return <li key={index}>{item}</li>;

          })}

        </ul>

      </Fragment>

    );

  }

  handleChange(e) {

    this.setState({

      inputValue: e.target.value,

    });

  }

  handleBtn() {

    console.log(13);

    let newList = this.state.list;

    this.setState({

      list: newList.push(this.inputValue),

    });

  }

}

export default TodoList;