菜鸟程序员的react -- TodoList 之旅

最新推荐文章于 2022-07-07 15:45:11 发布
最新推荐文章于 2022-07-07 15:45:11 发布
阅读量208 收藏 1
点赞数
分类专栏： react 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33931516/article/details/108253066
版权

前言

hello 大家好，我是一个菜鸟程序员，都说学习前端框架大多从 TodoList 学起，我呢，学习 react 也有一段时间了，特此做了一个 TodoList 做为自己的学习总结，顺便发个博客记录一下自己的学习，如有错漏欢迎大神在评论区指点。

环境安装

注意

第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

npx create-react-app my-app
cd my-app

删除掉新项目中 src/ 文件夹下的所有文件,并新建二个文件，index.js 和 index.css.

安装 antd，使用 UI 框架让我们的 TodoList 更加美观

npm install antd --save

分别复制以下代码到 index.js ,index.css

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Button, Divider, Input, Row, Col } from "antd";
import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
import "./index.css";
class List extends React.Component {
  render() {
    return (
      <div className="list">
        <Row className="list-item">
          <Col span={16}>col</Col>
          <Col span={4}><Button>修改</Button></Col>
          <Col span={4}><Button>删除</Button></Col>
        </Row>
      </div>
    );
  }
}
class Add extends React.Component {
  render() {
    return (
      <div className="add">
      <Input
        placeholder="请输入需要添加的事项"
        allowClear
      />
      <Button type="primary">添加</Button>
    </div>
    );
  }
}

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div className="todolist">
        <Divider>TodoList</Divider>
        <Add />
        <List />
      </div>
    );
  }
}

// ========================================

ReactDOM.render(<TodoList />, document.getElementById("root"));

index.css

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100vh;
    overflow: hidden;
}
.todolist{
    width: 400px;
    height: 630px;
    margin: 100px auto;
    border: 2px solid #000;
    padding: 20px;
}
.list{
    height: 430px;
    overflow-y: scroll;
}
.list-item{
    margin-top: 20px;
}
.add{
    display: flex;
}
.performance{
    display: flex;
    justify-content: space-between;
}
.finish{
    text-decoration:line-through;
    text-line-through-color:red
}

启动项目，这时我们已经可以看到 TodoList 大致的样子了

npm start

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i51S1ZLM-1598491947715)(https://imgkr2.cn-bj.ufileos.com/d459b745-7625-49e0-b34d-bf091a2d0e77.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=ljjg8xj5BnxmjYFjZdJNU%252FSTX6s%253D&Expires=1598432071)]

编写添加功能

这个小案例，我采用的是所有数据都交由父组件处理，然后分发给子组件，所以我们先在父组件的 state 里面声明一个 text 和 list，text 用于存储输入框的值，list 用于存储添加的列表。

  constructor(props) {
    super(props);
    this.state = {
      list: [],
      text: "",
    };
  }

编写输入框的 change 事件，利用一起传入的text赋值给输入框的value属性实现数据的双向绑定并通过添加事件获取text来修改list,其中我们用时间戳来当做添加数据的id，完整代码如下

TodoList

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      text: "",
    };
  }
  // 绑定输入框的值
  handleChange(e) {
    e.persist();
    this.setState({
      text: e.target.value,
    });
  }
  //添加
  handleAdd() {
    if (!this.state.text) {
      alert("输入框不能为空");
      return;
    }
    const Itme = { text: this.state.text, id: Date.now()};
    this.setState({
      list: [Itme, ...this.state.list],
      text: "",
    });
  }
  render() {
    return (
      <div className="todolist">
        <Divider>TodoList</Divider>
        <Add
          change={(e) => this.handleChange(e)}
          text={this.state.text}
          addClick={() => this.handleAdd()}
        />
        <List list={this.state.list}/>
      </div>
    );
  }
}

Add

class Add extends React.Component {
  render() {
    return (
      <div className="add">
        <Input
          placeholder="请输入需要添加的事项"
          onChange={(e) => this.props.change(e)}
          allowClear
          value={this.props.text}
        />
        <Button type="primary" onClick={() => this.props.addClick()}>添加</Button>
      </div>
    );
  }
}

通过遍历父组件传过来的list生成当前列表

List

class List extends React.Component {
  render() {
    const list = this.props.list
    return (
      <div className="list">
      {list.map((item) => (
        <Row className="list-item" key={item.id}>
          <Col span={16} >{item.text}</Col>
          <Col span={4}>
            <Button type="primary">修改</Button>
          </Col>
          <Col span={4}>
            <Button type="primary" danger>删除</Button>
          </Col>
        </Row>
      ))}
      </div>
    );
  }
}

添加修改功能

在父组件的 state 里面声明一个 AddOrUpdate 变量来存储当前是处于添加状态还是修改状态及需要修改项的id,在默认的清空下是处于添加状态，可以通过修改按钮更改为修改状态，当修改完成后还原成添加状态

TodoList

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      text: "",
      AddOrUpdate: { isAdd: true },
    };
  }
  // 绑定输入框的值
  handleChange(e) {
    e.persist();
    this.setState({
      text: e.target.value,
    });
  }
  //添加 | 修改
  handleAdd() {
    if (!this.state.text) {
      alert("输入框不能为空");
      return;
    }
    if (this.state.AddOrUpdate.isAdd) {
      const Itme = { text: this.state.text, id: Date.now(), isFinish: false };
      this.setState({
        list: [Itme, ...this.state.list],
        text: "",
      });
    } else {
      let { id } = this.state.AddOrUpdate;
      let newlist = this.state.list;
      newlist.map((item) => item.id === id && (item.text = this.state.text));
      this.setState({
        list: [...newlist],
        AddOrUpdate: { isAdd: true },
        text: "",
      });
    }
  }
  //修改
  handleUpdate(item) {
    this.setState({
      AddOrUpdate: { isAdd: false, id: item.id },
      text: item.text,
    });
  }
  render() {
    return (
      <div className="todolist">
        <Divider>TodoList</Divider>
        <Add
          change={(e) => this.handleChange(e)}
          text={this.state.text}
          addClick={() => this.handleAdd()}
          AddOrUpdate={this.state.AddOrUpdate}
        />
        <List
          list={this.state.list}
          update={(item) => this.handleUpdate(item)}
        />
      </div>
    );
  }
}

Add

class Add extends React.Component {
  render() {
    return (
      <div className="add">
        <Input
          placeholder="请输入需要添加的事项"
          onChange={(e) => this.props.change(e)}
          allowClear
          value={this.props.text}
        />
        <Button type="primary" onClick={() => this.props.addClick()}>
          {this.props.AddOrUpdate.isAdd ? "添加" : "确定修改"}
        </Button>
      </div>
    );
  }
}

List

class List extends React.Component {
  render() {
    const list = this.props.list;
    return (
      <div className="list">
        {list.map((item) => (
          <Row className="list-item" key={item.id}>
            <Col span={16}>{item.text}</Col>
            <Col span={4}>
              <Button type="primary" onClick={() => this.props.update(item)}>
                修改
              </Button>
            </Col>
            <Col span={4}>
              <Button
                type="primary"
                danger
              >
                删除
              </Button>
            </Col>
          </Row>
        ))}
      </div>
    );
  }
}

添加删除功能

这里我是通过filter来筛除点击的列表项实现删除功能的

  //删除
  handleDelete(item) {
    this.setState({
      list: this.state.list.filter((i) => i.id !== item.id),
    });
  }

接下来我们来实现最后一个功能了，也就是查询功能

我的思路是这样子的，给每条数据增加一个自定义状态（完成和未完成）,默认都是未完成，通过点击当前项来修改当前数据的状态,
设置三个按钮（全部，未完成，已完成）,然后在父组件设置一个变量来存储这三个状态，通过分别点击这三个按钮来状态,然后把这个状态传递给列表组件（List组件）,通过filter实现数据的筛选,因为我们所有的子组件的不包含state,所以我们可以优化一下都写成函数式组件

完整代码如下

import React from "react";
import ReactDOM from "react-dom";
import { Button, Divider, Input, Row, Col } from "antd";
import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
import "./index.css";

function List(props) {
  let list = props.list;
  if(props.condition === 'finish'){
    list = list.filter(item=>item.isFinish)
  }
  if(props.condition === 'unfinished'){
    list = list.filter(item=>!item.isFinish)
  }
  return (
    <div className="list">
      {list.map((item) => (
        <Row className="list-item" key={item.id}>
          <Col span={16} onClick={() => props.isFinish(item)} className={item.isFinish ? 'finish': null}>
            {item.text}
          </Col>
          <Col span={4}>
            <Button type="primary" onClick={() => props.update(item)}>
              修改
            </Button>
          </Col>
          <Col span={4}>
            <Button
              onClick={() => props.deleteClick(item)}
              type="primary"
              danger
            >
              删除
            </Button>
          </Col>
        </Row>
      ))}
    </div>
  );
}
function Add(props) {
  return (
    <div className="add">
      <Input
        placeholder="请输入需要添加的事项"
        allowClear
        onChange={(e) => props.change(e)}
        value={props.text}
      />
      <Button type="primary" onClick={() => props.addClick()}>
        {props.AddOrUpdate.isAdd ? "添加" : "确定修改"}
      </Button>
    </div>
  );
}
function Performance(props) {
  return (
    <div className="performance">
      {
        props.status.map(item=>(
        <Button type="primary" onClick={()=>props.statusClick(item.state)} key={item.state}>{item.text}</Button>
        ))
      }
    </div>
  );
}
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      text: "",
      AddOrUpdate: { isAdd: true },
      status:[
        {
          text:'全部',
          state:'All'
        },
        {
          text:'已完成',
          state:'finish'
        },
        {
          text:'未完成',
          state:'unfinished'
        }
      ],
      condition:'All'
    };
  }
  handleAdd() {
    if (!this.state.text) {
      alert("输入框不能为空");
      return;
    }
    if (this.state.AddOrUpdate.isAdd) {
      const Itme = { text: this.state.text, id: Date.now(),isFinish:false};
      this.setState({
        list: [Itme, ...this.state.list],
        text: "",
      });
    } else {
      let { id } = this.state.AddOrUpdate;
      let newlist = this.state.list;
      newlist.map((item) => item.id === id && (item.text = this.state.text));
      this.setState({
        list: [...newlist],
        AddOrUpdate: { isAdd: true },
        text: "",
      });
    }
  }
  handleDelete(item) {
    this.setState({
      list: this.state.list.filter((i) => i.id !== item.id),
    });
  }
  handleChange(e) {
    e.persist();
    this.setState({
      text: e.target.value,
    });
  }
  handleUpdate(item) {
    this.setState({
      AddOrUpdate: { isAdd: false, id: item.id },
      text: item.text,
    });
  }
  handleIsFinish(data) {
    let newlist = this.state.list;
    newlist.map((item) => item.id === data.id && (item.isFinish = !item.isFinish));
    this.setState({
      list: [...newlist],
    });
  }
  handleStatus(state){
    this.setState({
      condition:state
    })
  }
  render() {
    return (
      <div className="todolist">
        <Divider>TodoList</Divider>
        <Add
          addClick={() => this.handleAdd()}
          text={this.state.text}
          change={(e) => this.handleChange(e)}
          AddOrUpdate={this.state.AddOrUpdate}
        />
        <List
          list={this.state.list}
          deleteClick={(item) => this.handleDelete(item)}
          update={(item) => this.handleUpdate(item)}
          isFinish={(item) => this.handleIsFinish(item)}
          condition={this.state.condition}
        />
        <Performance status={this.state.status} statusClick={(state)=>this.handleStatus(state)}/>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(<TodoList />, document.getElementById("root"));

总结

react --TodoList 学习之旅到此结束了，希望我的学习经验能让大家有所收获,如有更好的实现方法可以在评论区留言哦！！！

线上demo

前端小菜鸟吖
关注
专栏目录
todolist 程序员管理日常工作的日志记录软件
09-12
todolist是一款适合程序员管理日常工作的日志记录软件,内置中文版
React入门最好的学习实例－TodoList
weixin_30492601的博客
05-24 165
前言 React 的核心思想是：封装组件，各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。 最近前端界闹的沸沸扬扬的技术当属react了，加上项目需要等等原因，自己也决定花些时间来好好认识下这个东西。然后花时间自己写了一个demo：react-todos， 你可以先点这里去看react-todo react首先值得拍手称赞的是它所有的开发都基于一个组件（compon...
react的小实例todolist
weixin_30294709的博客
04-20 109
一构建开发环境 todolist的开发工具包为webpack+es6+react，首先需要构建开发环境，我在上一篇文章webpack构建ant-design中已经构建了ant-design的开发环境，这里也是用到这边文章中所用的环境，在这个实例中需要用到箭头函数，所以还需要安装一下stage-0，安装语句如下： npm install --save-dev babel-pre...
学习React之旅--写一个todoList
一只胖胖胖miao
09-08 195
在上次文章中提到，我会学习React的基础和ant-design的一些组件，并且使用htmls5的web Storage实现一个todoList。 todoList的功能 写item：写入title及content 使用checkbox勾选item，表示这一项内容已做，item项的内容需要划掉 更改item中的content内容 删除某一项item list需要存储起来，下次访问这个页...
(七)React实现ToDoList
Felix的小黑板
09-26 276
import React,{Component} from 'react'; import '../assets/css/index.css'; class Todolist extends Component { constructor(props) { super(props); this.state = { list:[ ...
ts-react-todoList：用react + ts完成简单的todoList
02-15
ts-react-todoList 用react + ts完成简单的todoList import React , { useEffect , useRef , useState } from "react" ; import "./App.css" ; import produce from "immer" ; interface TodoList { id: string ; ...
react-redux:react-redux，todoList
04-29
react + redux + router + todoList git clone :guojinyu92210409/react-redux.git Installation npm install Running the Project npm start 资源地址 react全家桶 其他资源
react-tdd-todolist:使用TDDReactTodoList应用
04-28
**React-TDD-Todolist: 使用测试驱动开发（TDD）构建React待办事项列表应用** React是一个流行的JavaScript库，用于构建用户界面，尤其是单页应用程序。在这个名为"react-tdd-todolist"的项目中，我们将探讨如何...
react-todolist
weixin_43954835的博客
03-25 873
（todolist页面图） import { React,Component } from "react"; import './todoList.css'; import { Input ,Checkbox ,Button} from 'antd'; class TodoList extends Component { constructor(props) { super(props); this.state = { listvalue:[ { i..
react-redux-todolist.rar
04-23
《React-Redux-Todolist应用详解》 在前端开发领域，React 和 Redux 是两个非常重要的库，它们分别处理UI组件和状态管理。本项目“react-redux-todolist”旨在通过一个简单的待办事项列表（Todo List）应用，帮助...
React--Redux+Antd实现TodoList
WhaleFallljf的博客
12-01 201
Redux+antd实现todoList 安装,调度流程图Redux+antd实现todoList解释定义类型 解释 先看组件，组件不直接更新，需要传递给调度员一个action，这个action中包含自己想干的事。比如，数据添加，删除。调度员只作调度这一件事，将组件传递过来的action直接给store就算完成任务。store并不会直接做什么，而是将action和自身的state一同传递给reducer，具体干什莫，reducer决定。事件处理完成后，reducer将新的状态传递给store，于此同时，s
React学习(三)——实现TodoList
陈怂怂的博客
01-14 411
React学习(三)——实现一个ToDoList 1.新建TodoList.js //导入React相关依赖 import React, { Component, Fragment } from "react"; //创建一个组件 class ToDoList extends Component{ //构造函数 constructor(props){ super(props); //this.state里可以写一些初始化的数据 this.stat
React+Redux实现简单的待办事项列表ToDoList
大灰狼的小绵羊哥哥的博客
02-14 1267
使用Redux做了一个简单的ToDoList待办事项列表 这个例子也是源于Redux作者Dan Abramov的视频demo 还要特别说明一下 我还没有使用react-redux库进行解耦（可能以后加） 也没有拆分成多个文件等等优化 为了单纯的练习redux 适合初步学习redux的同学 本人学疏才浅，发现可以优化的地方或者问题还请大家指正，谢谢 功能样式 样子就是这样的 在输入框输入待办
浅谈React实现todolist
筱葭的博客
04-22 1175
todoList.html： todoList.jsx： var TodoList = React.createClass({ getInitialState: function() { return {lists: []} }, addList: function(list) { if (this.stat
TodoList:一款基于 TS + React + AntD + Koa + MongoDB 实现的 TodoList 全栈应用
04-30
基于 TS + React + AntD + Koa + MongoDB 实现的 TodoList 全栈应用 应用特点 前后端均用 TypeScript 编写 接口统一遵循 RESTful 风格 实现服务端的优雅错误处理 技术栈 语言 TypeScript（赋予 JS 强类型语言的特性） 前端 React（当下最流行的前端框架） Axios（处理 HTTP 请求） Ant-Design（阿里开源的 UI 语言框架） React-Router（处理页面路由） Redux（数据状态管理） Redux-Saga（处理异步 Action） 后端 Koa（基于 Node.js 平台的下一代 web 开发框架） Mongoose（内置数据验证， 查询构建，业务逻辑钩子等，开箱即用） 本地运行 # clone git clone https://github.com/B2D1/TodoList.git
react-todoList
yingchengzzz的博客
07-07 484
todolist
React-Redux-TodoList
02-08
这个名为"React-Redux-TodoList"的项目是结合了这两个库来实现一个简单的待办事项列表应用。让我们深入探讨React和Redux的核心概念以及如何将它们整合到一个实际的应用中。 React是Facebook开发的一个开源...
react小练习todolist并且简要使用hook
weixin_45942049的博客
10-13 235
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>私人练习</title> <script src="./libs/babel.min.js">&lt
react---todolist 基本布局
逆风飞翔的代码狗
07-11 315
react–todolist 最终要实现的页面如图所示： 上图中我们需要实现的有页面渲染、点击按钮添加、删除、改变每条数据前面的input框的选中效果 1.首先我们用react-cli搭建项目 ps： 需要安装的依赖： 将todolist划分为三个模块： todoHeader、todoInput 、todoList，将三个模块引入到文件App.js，再将App引入到项目主入口index.js，挂载到页面中去： 在App.js中定义好数据，其中arr是输入框下面用来展示的数据，暂时写死了 PS： 数据暂
reactjs+antd版的todolist实现的四种方式(一)——常用低阶版
峰会路转的博客
01-22 581
前提是假定已经搭建好了react环境，antd的ui框架，首先我们来先看下效果 在vue中实现这个功能想必大家都没问题了，那么在react中如何实现呢？ 需要注意的几个地方： 1.react没有自带计算属性的概念，要实现类似在vue的computed功能，需要自己开发 2.react没有vue的动态设置属性的概念，类似于vue的Object,Array的$set是不存在的 3.react没有自带的响应式概念，要实现类似vue的双向绑定需要手动实现 话不多说，上代码 核心组件 import TodoComp
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值