react实现简单TodoList

 TodoList.js

// TodoList.js

import React from 'react';
import ReactDOM from 'react-dom';
import './todolist.css';

let data = [
    {id: 1, text: '看书', status: "完成"},
    {id: 2, text: '写作业', status: "未完成"},
    {id: 3, text: '敲代码', status: "完成"},
];



class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: data};

    }
    AddItem(item){
        let newData = this.state.data.concat(item);
        this.setState({data : newData});
    }
    RemoveItem(index){
        this.state.data.splice(index, 1);
        let newData = this.state.data;
        this.setState({data : newData});
        console.log(this.state);
    }
    ChangeStatus = (index) => {
        console.log(index);
        let arr = this.state.data;
        arr[index].status = arr[index].status === '完成' ? "未完成":"完成";
        this.setState({
            data: arr
        })
    };
    render() {
        return (
            <div className={'todo'}>
                <h1>My TodoList</h1>
                <Form AddItem={this.AddItem.bind(this)} data={this.state.data}/>
                <Lists RemoveItem={this.RemoveItem.bind(this)} changeStatus={this.ChangeStatus} data={this.state.data}/>
            </div>
        );
    }
}

class Form extends React.Component{
    addItem(){
        let text = this.refs.text.value;
        if(!text.trim()){
            alert('Task cannot be null!');
            return;
        }
        let id = this.props.data.length + 1;
        let item = {
            id,
            text,
            status: "未完成"
        };
        this.props.AddItem(item);
        this.refs.text.value = '';
    }
    render(){
        return (
            <div className={'todo-form'}>
                <input type="text" ref='text' placeholder={'something to do ...'}/>
                <button onClick={this.addItem.bind(this)}> Add </button>
            </div>
        );
    }
}

class Lists extends React.Component{
    delItem(index){
        this.props.RemoveItem(index);
    }
    changeStatus = (index) => {
        this.props.changeStatus(index);
    };
    render(){
        const list = this.props.data.map(({id, text, status}, index)=>{
            return (
            <li key={index}>
                <span className={'li-id'} >{index + 1}</span>
                <span className={'li-text'}>{text}</span>
                <span className={['li-complete', status === '完成' ? 'finished': 'unfinished'].join(' ')} onClick={this.changeStatus.bind(this, index)}>{status}</span>
                <button className={'li-delete'} onClick={this.delItem.bind(this, index)}> Delete </button>
            </li>
            );
        });
        return (
            <ul className={'todo-list'}>
                {list}
            </ul>
        );
    }
}

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

todolist.css

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
#demo{
    width: 400px;
    margin: 100px auto;
}
#demo h1{
    text-align: center;
}
.todo-form{
    margin-bottom: 8px;
}
.todo-form input{
    width: 316px;
    height: 30px;
    outline: none;
    border: 2px solid #f40;
    text-indent: 8px;
}

.todo-form button {
    width: 80px;
    height: 34px;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #f40;
    user-select: none;
}

.todo-list {
    width: 100%;
}
.todo-list li {
    width: 388px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #000000;
    position: relative;
    margin-bottom: 4px;
    padding-bottom: 4px;
}
.todo-list li span{
    display: inline-block;
}
.todo-list li .li-id{
    width: 20px;
    text-align: center;
    margin-right: 10px;
}
.todo-list li .li-text {
    width: 180px;

}
.todo-list li .li-complete{
    width: 70px;
    border-radius: 5px;
    text-align: center;
}
.todo-list li .li-delete{
    position: absolute;
    right: 0;
    text-align: center;
    width: 100px;
    height: 30px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.unfinished{
    background-color: orange;
}
.finished{
    background-color: #97ff1e;
}

html 就免了吧.

为了学习组件通信, 强行使用了一波父子间通信, 否则只用一个组件实现代码会简单很多.

附上效果图: