React.js实现一个todo-list案例

一、创建项目

首先通过create-react-app  todo-list命令创建一个名为todo-list的项目，前提是react基本环境已安装好。结构目录如下所示：

二、新建父组件

如上图所示，在src下新建views文件夹，在该文件夹下添加todo-list.js文件。代码如下所示：

import React, { Component, Fragment } from 'react';
import '../css/style.css';
import TodoItem from './todolist-item';

class Todolist extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            list: ['列表一', '列表二', '列表三']
        }
        // 页面一开始就绑定好方法this指向
        this.handleClick = this.handleClick.bind(this)
        this.handleDelete = this.handleDelete.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }
    render() {
        return (
            <Fragment>
                <div>
                    <label htmlFor="insert" style={{ marginRight: 10 + 'px' }}>输入内容：</label>
                    <input id="insert" className="input" placeholder="请输入今日待办事项" value={this.state.inputValue} onChange={this.handleChange.bind(this)} />
                    <button className="btn" onClick={this.handleClick.bind(this)}>添加</button>
                </div>
                <ul className="item-box">
                    {
                        this.getTodoItem()
                    }
                </ul>
            </Fragment>
        )
    }
    //获取列表子组件
    getTodoItem() {
        return this.state.list.map((item, index) => {
            return (
                <TodoItem key={index} index={index} content={item} deleteitem={this.handleDelete} />
            )
        })
    }
    //输入框内容改变事件
    handleChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }
    //点击添加按钮时
    handleClick(e) {
        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }
    //删除时间
    handleDelete(index) {
        const _list = [...this.state.list];
        _list.splice(index, 1);
        this.setState({
            list: _list
        })
    }
}

export default Todolist;

三、新建子组件

在views文件夹下添加子组件todolist-item.js，代码如下所示：

import React, { Component } from 'react';

class TodoItem extends Component {
    constructor(props) {
        super(props);
        this.handleDelete = this.handleDelete.bind(this)
    }
    render() {
        return (
            <div>
                <span>{this.props.content}</span>
                <span className="del" onClick={this.handleDelete}>删除</span>
            </div>
        );
    }
   //删除子项调用父元素事件
    handleDelete() {
        const { deleteitem, index } = this.props;
        deleteitem(index)
    }
}

export default TodoItem;

四、新建样式文件

在css文件夹下添加style.css样式文件，代码如下所示：

body {
    padding: 20px;
}

.input {
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid #918e8eb2;
}

.btn {
    margin-left: 20px;
    background-color: #0ff;
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
}

.item-box {
    border: 1px solid rgb(201, 192, 192);
    border-radius: 3px;
    padding: 10px;
    font-size: 14px;
    position: relative;
}

.item-box>div {
    border-bottom: 1px solid #918e8eb2;
    margin-bottom: 10px;
}

.del {
    position: absolute;
    right: 15px;
    color: #f00;
    cursor: pointer;
}

五、修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TodoList from './views/todo-list';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

npm start后运行效果如下所示：