保姆级别手把手教写React的todolist案例

已于 2022-10-09 22:53:11 修改
阅读量1k 收藏 6
点赞数 4
分类专栏： 笔记 文章标签： react.js 前端 javascript
于 2022-10-09 22:46:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52139998/article/details/127230301
版权

文章目录

前言

TodoList是一个前端学习很不错的案例，不管是用原生javascript,还是vue，React来实现TodoList的功能，在前端学习中都是很重要的，这篇文章用React来实现简单的一个TodoList案例

一、React项目初始

1.创建react初始项目

a.打开一个文件夹，进入cmd
在这里插入图片描述
b.输入 命令行 create-react-app + 文件名 创建一个react项目
在这里插入图片描述
c.项目创建成功
在这里插入图片描述
4.用编辑器打开该文件， 或者直接cmd进入该文件目录
输入命令行 npm start 启动React项目

cmd直接进入
在这里插入图片描述
从项目文件进
在这里插入图片描述
至此一个React项目就创建完成了
在这里插入图片描述

2.项目初始化

删除项目文件中所有不需要的文件资源
同时将App.js，index.js, index.html这几个文件中的无效代码删除干净
在这里插入图片描述
这样就可以看到一个空白的页面环境

在这里插入图片描述

二、搭建项目

1.页面布局

App.js文件

a.初始化App组件，简单设计组件布局

import React, { Fragment } from "react";
import { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Fragment>
                <input></input>
                <button>提交</button>
            </Fragment>
        );
    }

   
}

export default App;

在这里插入图片描述
b.在 class 中，我们通过在构造函数中设置 this.state 并且初始化 { inputValue: ‘’, list: [] }

import React, { Fragment } from "react";
import { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '121',
            list: []
        };

    }

    render() {
        return (
            <Fragment>
                <input ></input>
                <button>提交</button>
            </Fragment>
        );
    }
}

export default App;

c.对input进行数据绑定，修改inputvalue的数据，input框中数据改变
在这里插入图片描述

import React, { Fragment } from "react";
import { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'yyy',
            list: []
        };

    }

    render() {
        return (
            <Fragment>
                <input value={this.state.inputValue}></input>
                <button>提交</button>
            </Fragment>
        );
    }
}

export default App;

d.对input框绑定handlechange函数，看能否实现input框每次改变的时候值的获取。

import React, { Fragment } from "react";
import { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'yyy',
            list: []
        };

    }

    render() {
        return (
            <Fragment>
                <input value={this.state.inputValue} onChange={this.handleChange}></input>
                <button>提交</button>
            </Fragment>
        );
    }

    handleChange(e) {
        alert(e.target.value);
    }
}

export default App;

在这里插入图片描述

做到这儿我们也发现了，虽然弹窗弹出来了一个yy, 但是input框中依旧是yy，说明现在的input框中的值并不能由视图直接去改变，我们应该在handleChange函数中实现这样一个功能，可以通过改变input的value绑定的inputValue，来改变视图中input框中的值。

e.于是我们修改handleChange函数来实现这个功能

import React, { Fragment } from "react";
import { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'yyy',
            list: []
        };

    }

    render() {
        return (
            <Fragment>
                <input
                    value={this.state.inputValue}
                    onChange={this.handleChange}></input>
                <button>提交</button>
            </Fragment>
        );
    }

    handleChange(e) {
        //alert(e.target.value);
        this.setState(() => (
            {
                inputValue: e.target.value
            }
        ));
    }
}

export default App;

结果报错了
在这里插入图片描述

在React中，传递的事件参数不是一个字符串，而是一个实实在在的函数，代码中的handleChange()函数并不是我们主动调用的，而是触发onChange的事件时，react内部再去调用这个函数。而react的内部是不知道这里的this是指向哪里的，因此我们要自己通过bind改变事件方法的指向。

所以代码修改如下

import React, { Fragment } from "react";
import { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'yyy',
            list: []
        };
        // 为了在回调中使用 `this`，这个绑定是必不可少的
        this.handleChange = this.handleChange.bind(this)
    }

    render() {
        return (
            <Fragment>
                <input
                    value={this.state.inputValue}
                    onChange={this.handleChange}></input>
                <button>提交</button>
            </Fragment>
        );
    }

    handleChange(e) {
        //alert(e.target.value);
        this.setState(() => (
            {
                inputValue: e.target.value
            }
        ));
    }
}

export default App;

f.对state中list数据的渲染
在这里插入图片描述

import React, { Fragment } from "react";
import { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'yyy',
            list: ['学习React', '学习英语']
        };
        // 为了在回调中使用 `this`，这个绑定是必不可少的
        this.handleChange = this.handleChange.bind(this)
    }

    render() {
        return (
            <Fragment>
                <input
                    value={this.state.inputValue}
                    onChange={this.handleChange}></input>
                <button>提交</button>
                <ul>
                    {this.state.list.map((item, index) => {
                        return (<div key={index}>{item}</div>)
                    })}
                </ul>
            </Fragment>
        );
    }

    handleChange(e) {
        //alert(e.target.value);
        this.setState(() => (
            {
                inputValue: e.target.value
            }
        ));
    }
}

export default App;

g.实现点击提交按钮添加待办事件

import React, { Fragment } from "react";
import { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'yyy',
            list: ['学习React', '学习英语']
        };
        // 为了在回调中使用 `this`，这个绑定是必不可少的
        this.handleChange = this.handleChange.bind(this)
        this.handleAdd = this.handleAdd.bind(this)
    }

    render() {
        return (
            <Fragment>
                <input
                    value={this.state.inputValue}
                    onChange={this.handleChange}></input>
                <button onClick={this.handleAdd}>提交</button>
                <ul>
                    {this.state.list.map((item, index) => {
                        return (<div key={index}>{item}</div>)
                    })}
                </ul>
            </Fragment>
        );
    }

    handleChange(e) {
        //alert(e.target.value);
        this.setState(() => (
            {
                inputValue: e.target.value
            }
        ));
    }

    handleAdd() {
   		//preState是setState方法自带的参数，表示未修改前的State
        this.setState((preState) => (
            {
                inputValue: '',
                //...preState.list,是对未修改前的list进行展开
                list: [...preState.list, preState.inputValue]
            }
        ))
    }
}

export default App;

h.点击待办事件实现删除功能

import React, { Fragment } from "react";
import { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'yyy',
            list: ['学习React', '学习英语']
        };
        // 为了在回调中使用 `this`，这个绑定是必不可少的
        this.handleChange = this.handleChange.bind(this);
        this.handleAdd = this.handleAdd.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
    }

    render() {
        return (
            <Fragment>
                <input
                    value={this.state.inputValue}
                    onChange={this.handleChange}></input>
                <button onClick={this.handleAdd}>提交</button>
                <ul>
                    {this.state.list.map((item, index) => {
                        return (
                            <li
                                key={index}
                                onClick={this.handleDelete}>
                                {item}
                            </li>)
                    })}
                </ul>
            </Fragment>
        );
    }

    handleChange(e) {
        //alert(e.target.value);
        this.setState(() => (
            {
                inputValue: e.target.value
            }
        ));
    }

    handleAdd() {
        this.setState((preState) => (
            {
                inputValue: '',
                list: [...preState.list, preState.inputValue]
            }
        ))
    }

    handleDelete(index) {
        this.setState((preState) => {
            //immutable
            //state不允许我们做任何改变
            const list = [...preState.list];
            list.splice(index, 1);
            return {
                list
            }
        })
    }
}

export default App;

三、组件拆分

1.分析

通过分析，我们将下面的list单独拿出来放在一个组件Item中，所以我们新建一个Item.js文件，并将其引入到App.js文件中使用，其中我们涉及到了组件之间值的传递，和vue一样，父组件向子组件传值 也是通过 props 来传，在子组件中用 this.props.xx 接收父组件传来的值。
在这里插入图片描述

2.全部代码

index.js文件

import React, { Fragment } from "react";
import { Component } from "react";
import Item from "./Item";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'yyy',
            list: ['学习React', '学习英语']
        };
        // 为了在回调中使用 `this`，这个绑定是必不可少的
        this.handleChange = this.handleChange.bind(this);
        this.handleAdd = this.handleAdd.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
    }

    render() {
        return (
            <Fragment>
                <input
                    value={this.state.inputValue}
                    onChange={this.handleChange}></input>
                <button onClick={this.handleAdd}>提交</button>
                <ul>
                    {this.getList()}
                </ul>
            </Fragment>
        );
    }

    getList() {
        return (
            this.state.list.map((item, index) => {
                return (
                    <div index={index}>
                        <Item item={item}
                            handleDelete={this.handleDelete}
                            key={index} />
                    </div>
                )
            })

        )
    }
    handleChange(e) {
        //alert(e.target.value);
        this.setState(() => (
            {
                inputValue: e.target.value
            }
        ));
    }

    handleAdd() {
        this.setState((preState) => (
            {
                inputValue: '',
                list: [...preState.list, preState.inputValue]
            }
        ))
    }

    handleDelete(index) {
        this.setState((preState) => {
            //immutable
            //state不允许我们做任何改变
            const list = [...preState.list];
            list.splice(index, 1);
            return {
                list
            }
        })
    }
}

export default App;

item.js文件

import React, { Component, Fragment } from "react";

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

    render() {
        return (
            <Fragment>
                <div onClick={this.handleClick}>{this.props.item}</div>
            </Fragment>
        )
    }

    handleClick() {
        const { index, handleDelete } = this.props;
        handleDelete(index);
    }
}

export default Item

四、总结

学习了几天的React了，因为一些事，导致最近几天的进度放慢了。因为先学的Vue，觉得很多操作和vue的操作挺像的。但React的学习，让我慢慢喜欢上了看英文的文档，还有论坛。通过这个todolist案例，我对react的基础语法更熟练，对常见的问题也有了处理经验。希望通过这篇文章，大家可以了解React的基础操作，也欢迎大佬对我的代码提出修改意见，希望后面依旧可以坚持一周一篇博客，对已经学习的知识有个及时的输出，后面还会对之前学的JS基础，ES6的学习写些总结。

鸡杂不下面
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ToDolist简述
Phoenie_的博客
12-24 3051
什么是ToDolist? ToDoList是一款非常优秀的任务管理软件，用户可以用它方便地组织和安排计划. 1:ToDolist经典案例 用todolist可以实现增删改查的功能 下面是一个简单的案例 index.js代码 index.js为入口文件 import React from 'react'; //引入react模块 import ReactDOM from 'react-dom'; i...
React版本的todoList案例源码
09-01
todoList绝对是前端必做的demo之一，各种版本的todoList大家肯定都接触过，这个React版本的你也绝对不能错过。里面用到了React16+typescript新增的React Hooks的这个新技术，在函数式组件里React Hooks是必须掌握的...
ToDoList 简易使用教程
热门推荐
qq_37910492的博客
01-25 1万+
下载最新版的todolist软件 该软件目前最新版本为7.0.13，同时提供了windows、安卓、苹果系统的安装文件，可按需下载。建议在以下国外网站下载，国内的也有，但并不是最新版的。 安装todolist软件 完成下载后一个todolist_exe.zip压缩文件，解压后点击todolist.exe安装，以下为安装步骤，需要注意的第4步默认很多选项，建议按照图示选择，等待熟练使用后再...
简单实现一个todoList（上移、下移、置顶、置底）
最新发布
前端程序员、项目经理、人工智能博主
10-31 917
深入解析HTML表格行操作：上移、下移、置顶和置底的实现。
TodoList案例全流程解析+浏览器本地存储的使用+组件自定义事件（绑定事件），尚硅谷Vue系列教程学习笔记（8）
weixin_43749999的博客
08-24 564
尚硅谷Vue系列教程学习笔记（8） 071-TodoList案例-初始化列表 072-TodoList案例-添加数据 073-TodoList案例-勾选动作实现 074-TodoList案例-删除动作 075-TodoList案例-底部统计功能实现 076-TodoList案例-底部交互动作实现 077-TodoList案例-总结 078-浏览器本地存储 079-TodoList-本地存储 080-组件自定义事件-绑定
React todoList 案例
benlalagang的博客
09-09 409
React todoList 组件拆分：header list>item footer 布局出静态代码 书写事件处理函数（数据在哪里、具体就在哪里修改）、这里数据全部放在 最外层APP组件、内部子组件触发回调（传入参数） 实际调用 app组件的处理函数（使用props 把函数传入进去） 具体操作为 添加数据、修改数据状态、删除数据、全选反选状态、清除已选状态 还可以继续优化、如数据存放在浏览器本地存储当中...
react 的 todoList 案例代码
06-20
react 的 todoList 案例代码
React版本的Todolist案例源码-组件化
04-19
React Todolist组件化案例是一个使用React框架开发的待办事项列表应用程序。该应用程序将待办事项列表分解为多个可重用的组件，包括添加待办事项、显示待办事项列表和标记已完成的待办事项等组件。通过组件化的方式...
React实现TodoList效果案例
04-02
使用 React 脚手架实现 TodoList 功能 功能: 组件化实现此功能 1. 显示所有todo列表 2. 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本 实现方式： App.js 为父组件，通过组件之间的传参来实现所有功能
react-todolist练习资源
05-12
react-todolist练习资源，基于类式创建组件 以及完整代码
React-ToDoList:React中的待办事项列表
05-10
React到清单 使用In React创建了基本的任务清单。
React-Todo-List:使用函数组件钩子React待办事项列表
05-29
这个项目是用引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果您进行编辑，页面将重新加载。 您还将在控制台中看到任何 lint 错误。 npm test 在交互式观察模式下启动测试运行器。 有关更多信息，请参阅有关的部分。 npm run build 将用于生产的应用程序构建到build文件夹。 它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。 最小化内部版本，文件名包含哈希值。 您的应用程序已准备好部署！ 有关更多信息，请参阅有关的部分。 npm run eject 注意：这是一种单向操作。 一旦eject ，就回不去了！ 如果您对构建工具和配置选择不满意，您可以随时eject 。 此命令将从您的项目中删除单个构建依赖项。 相反，它会将所有配置文件和可传递依赖项（webpack、B
react+react-redux+redux实现的todolist案例
02-09
react+react-redux+redux实现的todolist案例,适合初学者学习，又想通过redux进军react－redux可以尝试
React实现一个简单的TodoList
前端小东
09-23 493
作为React入门教程，todoList经常被哪来做入门教程，今天我们也来手把手搭建个todolist，简单粗暴，方便学习 1：脚手架搭建一个项目react-study create-react-app react-study 2:进入目录，启动项目 cd react-study npm start 3:新建一个TodoList.js import React,{Component,Fragment} from 'react'; import './App.css'; import TodoI
react入门学习---Todolist的实现（便签输入增删）
一粒程序米
02-13 595
主要学习了react的数据渲染方式，这和vue差别很大；
React手写一个TodoList案例
XuZhiqiang的博客
12-16 189
React的一个TodoList案例
react的小案例 TODOList
weixin_46468143的博客
09-05 374
react 案例
Excel todolist制作
ASP.NET OSGI AJAX jQuery ----- 帮助别人得到他想要的，你就能得到你想要
11-05 3275
1、下拉列表制作       如，任务的优先级：优先、中等、低的制作     在【数据】-【数据有效性】-【设置】-【序列】-【选择使用下拉列表】，然后在【来源】中填入：优先,中等,低，注意其中是以英文逗号分开的 2、日期控件       首先添加【开发工具】菜单，方法：在【文件】-【选项】-【自定义功能】-右侧视图的右侧列表中选择倒数第三个【开发工具】      第二，在【开发
react实现todolist的新增和删除（使用class类组件、组件拆分）
happysmartgirl的博客
08-28 315
一、创建项目 查看react官方文档 https://reactjs.bootcss.com/docs/create-a-new-react-app.html npx create-react-app my-app cd my-app yarn start 二、精简代码 刚刚开始接触react，创建完react项目以后，感觉文件好多，好复杂，这个时候我们把不需要的文件删掉，对于这个项目来说，我的src文件夹里面就剩下index.js入口文件，App.js文件，其他全部删掉，包括在index.js 和 Ap
react todolist组件化案例
06-06
React Todolist组件化案例是一个使用React框架开发的待办事项列表应用程序。该应用程序将待办事项列表分解为多个可重用的组件，包括添加待办事项、显示待办事项列表和标记已完成的待办事项等组件。通过组件化的方式，可以使代码更加模块化、可维护性更高，并且可以更容易地扩展和重用代码。该案例展示了React框架的强大功能，以及如何使用组件化的方式来构建复杂的应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值