React学习07----demo练习1

最新推荐文章于 2022-05-13 16:46:57 发布

zhaihaohao1

最新推荐文章于 2022-05-13 16:46:57 发布

阅读量217

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/87878291

版权

本文通过React实现了一个仿todolist的功能，详细介绍了项目结构和代码实现，并提供了源码下载链接，帮助读者进行React实战练习。

摘要由CSDN通过智能技术生成

做一个仿 todolist 的功能
http://www.todolist.cn
效果：
在这里插入图片描述
项目结构：

代码：
ToDoList.js

import React from 'react';

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

        this.state = {
            name: 'ToDoList 案例演示',
            username: 'ooo',
            list: ['zhh1',

            ],
        }
    }

    // 添加数据
    addOnClick = () => {
        //使用ref，拿到输入框的数据
        let inputValue = this.refs.data.value;
        //把数据保存到数组中
        var myList = this.state.list;
        myList.push(inputValue);

        //重新赋值，自动刷新
        this.setState({