react完成todoList

熟悉react语法，完成todoList小逻辑
1.immutable这个，state不允许我们自己修改，如果要修改state数据，需要copy副本修改
2.this指向问题，绑定事件时，需要指定函数调用时的this
3.循环生成列表，使用.map方法
4.不想要多余的div标签，可以使用fragment代替

import react, { Component, Fragment } from 'react';
class TodoList extends Component {
  constructor(props) {
    super(props); // 父类，Component类的构造函数
    this.state = {//react把数据存储到state中
      inputValue: '',
      list: [
        '学习react',
        '学习英文',
        '吃肉都'
      ],
    }
  }
  handleChangeEvent = (e) => {
    //  修改状态的方法
    this.setState({
      inputValue: e.target.value,
    })
  }
  // 列表新增功能
  handleClick() {
    // 点击btn后，增加list
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: '',
    })
  }
  // 列表删除功能
  delItemEvent = (i) => {
    // immutable   state不允许我们做任何的改变，如果要改的话，拿出来副本改
    let list = [...this.state.list];
    list.splice(i,1);
    this.setState({
      list: list,
    })
  }
  render() {
    return (
      <Fragment>
        <input value={this.state.inputValue} onChange={this.handleChangeEvent} /> <button onClick={this.handleClick.bind(this)}>提交</button>
        <ul>
          {
            this.state.list.map((item, index) => {
              return (<li key={index}>{item}    <button onClick={() => this.delItemEvent(index)}>X</button></li>)
            })
          }
        </ul>
      </Fragment>
    )
  }
}
export default TodoList;