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} onChange={this.handleDelete.bind(this, 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.state.inputValue),

    // });

    this.setState({

      list: [...this.state.list, this.state.inputValue],

    });

  }

  handleDelete(index) {

    this.setState({

      list: this.state.list.splice(index, 1),   //为什么这样写就没办法删除 

    });

  }

}

export default TodoList;