使用React实现一个TodoList案例

1.效果图:

2.项目源码

3.源码

TodoList.js

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;

TodoItem.js

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;

index.js

/**
 * 整个项目的入口文件
 */
//引入React库，理解语法
import React from 'react';
//引入ReactDom让我们可以将一个组件挂载到DOM组件
import ReactDOM from 'react-dom';
//App组件，大写字母开头
import TodoList from './TodoList';

//将组件渲染到页面上
ReactDOM.render(<TodoList />,document.getElementById('root'));

style.css

.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;
}

item.css

.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;
}

更多参考链接:https://blog.csdn.net/sinat_38368658/article/details/108732416