React学习之Todo List组件Demo

最新推荐文章于 2025-06-10 14:21:23 发布

欢喜哥

最新推荐文章于 2025-06-10 14:21:23 发布

阅读量399

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： React

本文链接：https://blog.youkuaiyun.com/u010420435/article/details/83934041

React 专栏收录该内容

1 篇文章

订阅专栏

本文分享了使用React创建TodoList组件的全过程，通过实例演示了如何构建Message和Todo组件，实现任务项的添加与状态切换，展示了组件化的React应用构建方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

看完入门教程之后，写了一个Todo List组件的demo，整个效果如下图
在这里插入图片描述

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

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

Todo组件
Todo组件是由若干个Message组件与底部一个Form标签构成
在这里插入图片描述

代码如下

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 (<div>
                <li>
                    <i className="message-done">
                        {message}
                    </i>
                    <button onClick={this.handleClick}>
                        UNDONE
                    </button>
                </li>
            </div>
            );
        }
        else {
            return (<div>
                <li>
                    <i className="message-undone">
                        {message}
                    </i>
                    <button onClick={this.handleClick}>
                        Done
                    </button>
                </li>
            </div>
            );
        }
    }
}

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) =>
            <Message message={messageList.message} onItemDone={this.handleDone} state={messageList.isDone} index={messageList.index} />
        );
        return (
            <div className="App">
                <header className="App-header">
                    <ul>
                        {listItems}
                    </ul>

                    <ul>
                        <form onSubmit={this.handleSubmit}>
                            <ul>
                                <label>
                                    <textarea value={this.state.value} onChange={this.handleChange} />
                                </label>
                            </ul>
                            <ul>
                                <input type="submit" value="新增" />
                            </ul>
                        </form>
                    </ul>
                </header>
            </div>
        );
    }
}

export default Todo;

整个项目的地址如下
https://github.com/PeterXiaoWang/React-Study/tree/master/my-react-demo