欢喜哥
欢喜哥

React学习之Todo List组件Demo

React是目前最火的前端技术之一，最近笔者也看了下React官方文档的入门教程（传送门：https://react.docschina.org/docs/hello-world.html）

看完入门教程之后，写了一个Todo List组件的demo，整个效果如下图
React学习之Todo List组件Demo_第1张图片

React的一个理念就是抽出组件，一个页面是由很多个组件构成，每个组件相互联系。本Demo的整个页面是由一个Message组件与一个Todo组件构成。

Message组件
在这里插入图片描述

Todo组件
Todo组件是由若干个Message组件与底部一个Form标签构成
React学习之Todo List组件Demo_第2张图片

代码如下

import React, { Component } from 'react';
import './App.css';

class Message extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        event.index = this.props.index;
        this.props.onItemDone(event);
    }

    render() {
        const message = this.props.message;
        const done = this.props.state;
        if (done) {
            return (

                
  • 
                    
                        {message}
                    
                    
                
    • 
            
    
            );
        }
        else {
            return (
    
                
  • 
                    
                        {message}
                    
                    
                
    • 
            
    
            );
        }
    }
}

class Todo extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: '请输入',
            messages: []
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleDone = this.handleDone.bind(this);
    }

    handleChange(event) {
        this.setState({ value: event.target.value });
    }

    handleSubmit(event) {
        const arrary = this.state.messages;
        const content = this.state.value;

        const item = {
            message: content,
            isDone: false,
            index: (new Date()).valueOf()
        }

        if (content.length !== 0) {
            arrary.push(item);
        }

        this.setState({
            value: "",
            message: arrary
        });

        event.preventDefault();
    }

    handleDone(event) {
        const currentIndex = event.index;
        const messageList = this.state.messages;

        for (var num = 0; num < messageList.length; num++) {
            var item = messageList[num];
            if (item.index === currentIndex) {
                var currentState = item.isDone
                item.isDone = !currentState;
            }
        }

        this.setState({ messages: messageList });
        console.log(messageList);
    }

    render() {
        const messageList = this.state.messages;
        const listItems = messageList.map((messageList) =>
            
        );
        return (
            
    
                
    
                    
      
                        {listItems}