React入门——制作一个TodoList App

源码

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

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      list: ["Learn React", "Play LOL"]
    };
  }
  render() {
    return (
      <Fragment>
        <div>
          <input
            value={this.state.inputValue}
            onChange={this.handleInPutChange.bind(this)}
            onChange={this.handleInPutChange.bind(this)}
          />
          <button onClick={this.handleBtnClick.bind(this)}>Submit</button>
        </div>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              //这里不推荐直接用index来做为map的key
              <li key={index} onClick={this.handleItemDelete.bind(this, index)}>
                {item}
              </li>
            );
          })}
        </ul>
      </Fragment>
    );
  }
  // 提交输入
  handleBtnClick(e) {
    this.setState({
      list: [...this.state.list, this.state.inputValue], //将输入添加到state中的list
      inputValue: "" //清除inputValue
    });
  }
  // 添加改变事件
  handleInPutChange(e) {
    this.setState({
      inputValue: e.target.value //将输入映射到state
    });
  }
  //添加删除事件
  handleItemDelete(index) {
    const list = [...this.state.list]; //复制原来的数组
    list.splice(index, 1); //对副本进行删除
    this.setState({
      list: list //将修改之后的list赋值给state
    });
  }
}

export default TodoList;