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

import TodoItem from './TodoItem'

import './style.css'

//定义一个React组件

class TodoList extends Component {

  constructor(props) {

    super(props);

    this.state = {

      list: [],

      inputValue: '',

    }

    this.handleInputChange = this.handleInputChange.bind(this);

    this.handleBtnClick = this.handleBtnClick.bind(this);

    this.handleDelete = this.handleDelete.bind(this);

  }

  handleBtnClick() {

    if (this.state.inputValue == '') {

      alert("请输入代办项内容");

      return;

    }

    this.setState({

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

      inputValue: '',

    });

  }

  handleInputChange(e) {

    this.setState({

      inputValue: e.target.value

    });

    //console.log(e.target.value)

  }

  handleDelete(index) {

    const list = [...this.state.list];

    list.splice(index, 1);

    this.setState({

      list: list

    })

  }

  getTodoItems() {

    return (

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

        return (

          <TodoItem

            delete={this.handleDelete}

            key={index}

            content={item}

            index={index}

          />)

      })

    )

  }

  render() {

    return (

      <div className='w'>

        <div className="header">

          <div className="header-content">

            <span className='logo'>ToDoList</span>

            <div className="addItem">

              <input placeholder="添加ToDo" value={this.state.inputValue} onChange={this.handleInputChange} />

              <button onClick={this.handleBtnClick}>add</button>

            </div>

          </div>

        </div>

        <ul className="main">

          <div className="main-header">

            <span>正在进行</span>

          </div>

          <div className="main-content">

            {this.getTodoItems()}

          </div>

          <div className="main-header">

            <span>已经完成</span>

          </div>

        </ul>

        <div className="footer">

          <span>Created by Elylic @2020-9 todolist.cn</span>

        </div>

      </div>

    );

  }

}

//导出组件

export default TodoList;

import React ,{Component} from 'react'

import './item.css'

class TodoItem extends Component{

  constructor(props){

    super(props);

    this.handleDelete = this.handleDelete.bind(this)

  }

  handleDelete(){

    this.props.delete(this.props.index);

  }

  render(){

    const {content } = this.props;

    return (

      <div>

        <p className="todo-item"><input type="checkbox"/>{content}

        <button className="todo-delete" onClick={this.handleDelete}>delete</button>

        </p>

      </div>

    )

  }

}

export default TodoItem;

/**

 * 整个项目的入口文件

 */

//引入React库，理解语法

import React from 'react';

//引入ReactDom让我们可以将一个组件挂载到DOM组件

import ReactDOM from 'react-dom';

//App组件，大写字母开头

import TodoList from './TodoList';

//将组件渲染到页面上

ReactDOM.render(<TodoList />,document.getElementById('root'));

.w{

  width: 100%;

  background-color: #c7c6c7;

  padding: 0;

  margin: 0;

}

/*头部*/

.header{

  width: 100%px;

  height: 50px;

  margin: 0 auto;

  background-color:#2D2c2D

}

.header-content{

  width: 500px;

  margin: 0 auto;

}

.logo{

  display: inline-block;

  float: left;

  color: #D9D4D4;

  font-size: 26px;

  font-weight: bold;

  line-height: 20px;

  padding-top: 15px;

}

.addItem{

  float: right;

  margin-left: 100px;

  padding-top: 15px;

}

.addItem input{

  display: inline-block;

  width: 200px;

  height: 20px;

  border-radius: 5px;

  padding: 0px 10px;

  font-size: 12px;

}

.addItem button{

  background: #ffffff;

  color:#2D2c2D;

  border-radius: 5px;

}

/*主体内容*/

.main{

  width: 500px;

  padding:0;

  margin: 0 auto;

  background-color: #c7c6c7;

}

.main-header span{

  display: inline-block;

  font-size: 20px;

  font-weight: bold;

  margin: 20px 0;

}

/*底部区域*/

.footer{

  width: 300px;

  padding:0;

  margin: 0 auto;

  text-align: center;

  font-size: 12px;

  color:#78777A;

  background-color: #c7c6c7;

  padding-bottom: 12px;

}

.todo-item{

  display: block;

  width: 480px;

  background-color: #ffffff;

  border-radius: 3px;

  padding: 5px 10px;

  font-size: 16px;

  margin: 5px 0h;

}

.todo-item input{

  float: left;

  margin-right: 10px;

}

.todo-delete{

  float: right;

  color:#2D2c2D;

}