react入门之旅2——todoList案例之基础知识应用

最新推荐文章于 2022-05-01 17:41:07 发布
最新推荐文章于 2022-05-01 17:41:07 发布
阅读量286 收藏
点赞数 1
分类专栏： react 文章标签： react 测试工程师
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41470573/article/details/118327333
版权

案例

  1. 显示一个多选列表，每一个多选项后面有一个删除按钮，点击可删除
  2. 多选列表鼠标移入高亮显示并展示删除按钮，移除正常显示不展示删除按钮
  3. 列表上面有一个输入框，用户可以输入选项，回车添加进列表
  4. 列表底部有统计数据展示，展示【已完成X/全部Y】
  5. 底部右侧有一个清空勾选按钮，点击清除所有勾选

示意图：

项目思维

项目

        node_modules——依赖库

        public——公共文件目录（其中最重要的是首页的html）

        src——代码库

                componnents——组件库

                        Componnent_A——组件A

                                index.jsx——组件代码

                                index.css——组件样式代码

                        ...

                App.jsx——所有组件的父组件

                App.css——App组件样式

                index.js——渲染

这个目录层级，是工作中常用的层级关系，一般公司都采用这种，我们测试人员虽然不是做前端工作的，但还是需要和公司接轨

创建项目

webstorm-->File-->New-->Project...-->React，自定义一个项目名（本人创建的项目名：todo_demo），点击create

小坑：项目主目录下新建一个.env文件，添加【SKIP_PREFLIGHT_CHECK=true】

然后试运行，在控制台输入npm start，如下图所示

index

这个只是把App渲染到页面，这个是固定代码，基本不需要修改，所以先把这个写好

import React from "react";
import ReactDOM from 'react-dom';
import App from './App';

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

拆分组件

App

        Header：头部输入框组件

        List：列表组件

                Item：列表元素组件

        Footer：底部数据展示&按钮组件

first：项目初始化

将每一个组件中的index中写好类式组件，快捷方式rcc，将类名更改为组件名

second：静态页面

这里需要使用到官网描述的一个知识点——状态提升，其实说到底，就是state只在父组件中维护，子组件只关心props

因为要写出静态页面，初始的数据需要先定义好

app

import './App.css';

import React, {Component} from 'react';
import Header from "./componnents/Header";
import List from "./componnents/List";
import Footer from "./componnents/Footer";

class App extends Component {

    state = {
        todos: [
            {id: "001", name: "练习", done: false},
            {id: "002", name: "react", done: true},
            {id: "003", name: "vue", done: false}
        ]
    }

    render() {

        const {todos} = this.state;

        return (
            <div>
                <Header/>
                <List todos={todos}/>
                <Footer/>
            </div>
        );
    }
}

export default App;

Header

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

class Header extends Component {
    render() {
        return (
            <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        );
    }
}

export default Header;

Footer

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

class Footer extends Component {
    render() {
        return (
            <div>
                <input type="checkbox"/>
                <span>已完成{}</span>/全部{}
                <button>清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;

List

import React, {Component} from 'react';
import Item from "../Item";
import './index.css'

class List extends Component {
    render() {

        const {todos} = this.props;

        return (
            <ul>
                {todos.map((todo) => <Item name={todo.name} key={todo.id}/>)}
            </ul>
        );
    }
}

export default List;

Item

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

class Item extends Component {
    render() {

        const {name} = this.props;

        return (
            <li>
                <input type="checkbox"/>
                <span>{name}</span>
                <button>删除</button>
            </li>
        );
    }
}

export default Item;

third：实现逻辑

app

import './App.css';

import React, {Component} from 'react';
import Header from "./componnents/Header";
import List from "./componnents/List";
import Footer from "./componnents/Footer";

class App extends Component {

    state = {
        todos: [
            {id: "001", name: "练习", done: false},
            {id: "002", name: "react", done: true},
            {id: "003", name: "vue", done: false}
        ]
    }

    updateTodos = (name) => {
        const uuid = require('uuid');
        const newTodo = {id: uuid.v1(), name: name, done: false};
        this.setState({todos: [...this.state.todos, newTodo]});
    }

    updateTodo = (id, done) => {
        const {todos} = this.state;
        const newTodos = todos.map((todo) => {
            if (todo.id === id) {
                todo.done = !done;
                return todo;
            } else {
                return todo;
            }
        });
        this.setState({todos: newTodos});
    }

    deleteTodo = (id) => {
        const {todos} = this.state;
        const newTodos = todos.filter((todo) => {
            return id !== todo.id
        });
        this.setState({todos: newTodos});
    }

    clearTodos = () => {
        const {todos} = this.state;
        const newTodos = todos.map((todo) => {
            todo.done = false;
            return todo;
        });
        this.setState({todos: newTodos});
    }

    checkTodos = (checked) => {
        const {todos} = this.state;
        const newTodos = todos.map((todo) => {
            todo.done = checked;
            return todo;
        });
        this.setState({todos: newTodos});
    }

    render() {

        const {todos} = this.state;

        return (
            <div>
                <Header updateTodos={this.updateTodos}/>
                <List todos={todos} deleteTodo={this.deleteTodo} updateTodo={this.updateTodo}/>
                <Footer todos={todos} clearTodos={this.clearTodos} checkTodos={this.checkTodos}/>
            </div>
        );
    }
}

export default App;

Footer

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

class Footer extends Component {

    handleClick = () => {
        this.props.clearTodos();
    }

    handleChange = (event) => {
        const checked = event.target.checked;
        this.props.checkTodos(checked);
    }

    render() {

        const {todos} = this.props;
        const total = todos.length;
        const doneCount = todos.reduce((pre, todo) => {
            if (todo.done === true) {
                pre += 1;
            }
            return pre;
        }, 0)

        return (
            <div>
                <input type="checkbox" onChange={this.handleChange}/>
                <span>已完成{doneCount}</span>/全部{total}
                <button onClick={this.handleClick}>清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;

Header

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

class Header extends Component {

    handleChange = (event) => {
        const {keyCode, target} = event;
        if (keyCode !== 13 || target.value === '') {
            return;
        }
        this.props.updateTodos(target.value);
        target.value = '';
    }

    render() {
        return (
            <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.handleChange}/>
        );
    }
}

export default Header;

List

import React, {Component} from 'react';
import Item from "../Item";
import './index.css'

class List extends Component {
    render() {

        const {todos} = this.props;

        return (
            <ul>
                {todos.map((todo) => <Item {...todo} key={todo.id}
                                           deleteTodo={this.props.deleteTodo}
                                           updateTodo={this.props.updateTodo}/>)}
            </ul>
        );
    }
}

export default List;

Item

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

class Item extends Component {

    state = {mouse: false}

    handleClick = (id) => {
        this.props.deleteTodo(id);
    }

    handleCheck = (id, done) => {
        this.props.updateTodo(id, done);
    }

    mouseE = () => {
        this.setState({mouse: true});
    }

    mouseL = () => {
        this.setState({mouse: false});
    }

    render() {

        const {id, name, done} = this.props;
        const {mouse} = this.state;

        return (
            <li onMouseEnter={this.mouseE} onMouseLeave={this.mouseL}
                style={{backgroundColor: (mouse ? "#ddd" : "white")}}>
                <input type="checkbox" onChange={() => this.handleCheck(id, done)} checked={done}/>
                <span>{name}</span>
                <button onClick={() => this.handleClick(id)} style={{display: (mouse ? 'block' : 'none')}}>删除</button>
            </li>
        );
    }
}

export default Item;

这样整个逻辑代码就已经实现了，由于本人是新手，打以上代码花了差不多一天吧，虽然这次练习纯手敲并未参考，但之前已经跟着教程敲过一遍了。在练习的时候总结了一些基础知识点，如下：

  • object的key是不加引号的字符串
  • style中背景色关键字是backgroundColor
  • array.filter()是自带return的，只需要判断一下，true就返回遍历的对象
  • array.reduce()，第一个参数是function，入参有两个，第一个可认为是自定义变量，第二个是数组遍历的元素；第二个参数是function第一个入参的初始值
  • 状态提升，先写事件，事件需要操作state就写好操作函数，然后在父组件中定义该操作函数，事件中操作使用props调用该函数
  • input，需要根据输入值来判断的时候，不要使用onChange事件，使用键盘事件即onKeyUp/onKeyDown

总结：勤加练习，这样的题目至少要能纯手敲一遍

样式就不弄了，偷个懒

smallfish118
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react项目之TodoList
12-31
使用react实现todolist功能，运用了react的基本语法，父子组件的传值，jsx基本语法，性能优化。
用react写一个todolist
weixin_43353869的博客
09-13 336
import React from 'react' import '@/assets/css/todoList.css' export default class todo extends React.Component{ constructor(props){ super(props) this.state = { doingList: [],// 正在进行的任务列表 task: '', // 任务名称 doneList: [] // 已经完成的任
react写简易版的todoList
聪明绝顶的你与即将秃头的我
01-05 279
1.首先我们得有个渲染出来的页面 这个页面第一行是一个标题todoList function App(){ return( <div> <h1>todoList</h1> </div> ) } export default App; 效果图： 然后下面几行是事先记录好的list，我们可以把list当成状态 然后遍历这些状态可以用map，JS代码要用{}括起来。 import React,{useState
todoList (React版)
web_only_的博客
12-28 240
效果图： 该案例引入了：<link rel="stylesheet" href="style/bootstrap.css"> <div id="app"></div> //组件TodoItem(子组件) class TodoItem extends React.Component{ //删除待办事宜 deleteItem(index){ this.props.onCustom(index); } render(){
使用react实现一个todoList
浪头的博客
05-01 2090
王元肉==>个人主页 大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。 推荐阅读 文章结构创建项目编写todoList的基本结构实现input框的双向绑定实现新增，删除功能实现修改功能 创建项目 npx create-react-app web 使用react脚手架创建项目，项目名称为web cd web co
React版本的todoList案例源码
09-01
todoList绝对是前端必做的demo之一，各种版本的todoList大家肯定都接触过，这个React版本的你也绝对不能错过。里面用到了React16+typescript新增的React Hooks的这个新技术，在函数式组件里React Hooks是必须掌握的...
react 的 todoList 案例代码
06-20
在这个"todoList"案例中，我们将深入探讨React如何实现一个简单的待办事项列表应用。这个例子可以帮助初学者理解React的基本概念，如组件、状态和生命周期方法。 首先，React组件是构建应用程序的基础。在"todoList...
React版本的Todolist案例源码-组件化
最新发布
04-19
React Todolist组件化案例是一个使用React框架开发的待办事项列表应用程序。该应用程序将待办事项列表分解为多个可重用的组件，包括添加待办事项、显示待办事项列表和标记已完成的待办事项等组件。通过组件化的方式...
react pro——————————
04-14
react pro——————————
React入门小项目——美食清单
07-18
在本React入门项目中，我们将探索如何利用React框架构建一个简单的美食清单应用。这个小demo旨在帮助初学者理解和掌握React的基础知识，包括组件化开发、状态管理和事件处理等核心概念。接下来，我们将深入讨论这些...
react-使用React实现的todolist
08-14
使用 React 实现 Todo-List，实现的功能有新增一个任务，完成任务以及删除任务
用React实现一个完整的TodoList的示例代码
08-29
本篇文章主要介绍了用React实现一个完整的TodoList的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react+redux TODO List
FightingFor_Dream的博客
06-13 304
官方TODO List 重写官方TodoList
react 实现 todolist
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
09-29 195
react 实现 todolist 这次主要是布局方面 目录react 实现 todolist目录结构pages/todoindex.js 代码input.js 代码item.js代码List.js 代码item.css 代码app.js 代码 目录结构 pages/todo index.js 代码 import React, { Component } from 'react' import List from './List'; import Input from './Input' cl
用React实现一个完整的TodoList
Picking_up_stones的博客
10-28 6720
前言：算起来已经有一个多月没有写博客了，近来懈怠了不少，也不知道要写些什么，最近学了一段时间的React，一直都在看些理论性的知识，总觉得应该写个什么来练练手，所以还是拿个简单的todoList来举个例子吧！ 一. 首先根据效果图讲一下要实现的功能吧 （1）可以添加任务； （2）已完成任务以及未完成任务的颜色区分开； （3）进行添加任务，修改任务状态，以及删除任...
react实现todolist
qq_37473645的博客
07-22 1004
使用React做一个简单的todolist小demo新建一个react项目 todolist写出todolist的基本结构用数组把数据存储起来监听输入框里面的内容,与state 里的inputValue绑定起来实现增加功能实现删除功能将li提取出来用单独作为一个组件，利用props传值修改删除功能，实现子组件通过父组件传过来的方法对父组件通信 新建一个react项目 todolist // 创建r...
React基础入门之编写简单TodoList功能
cherryjia99的博客
03-01 161
先写了一个简单的TodoList import React,{Component,Fragment} from 'react'; class TodoList extends Component{ render(){ return( <Fragment> <input/> <ul> <li>1</li&g...
react学习笔记03-使用react编写todolist功能
weixin_45640411的博客
05-11 140
1、我们在index.js当中修改，把App改成Todolist（见图）。再编写一个TodoList.js（见图）。 2、我们在TodoList当中简单写一下提交框以及列表（见图）。注意在规则中render函数返回的最外层是一定需要有一个包裹元素的，但是我们有时候不想用一个元素包裹所有返回的内容，我们就可以用占位符Fragment，当然这也是需要引入的。 3、但是这个时候我们的网页还是静态页面，接下来我们给网页加上响应事件。在React设计当中，我们不需要直接操作DOM，而是我们去改变数据，React
精通React之旅
"学习React之路" 在前端开发领域，React.js是一个非常重要的库，它由Facebook开发并维护，用于构建用户界面，尤其是单页应用程序。"Road to learn React" 是一本旨在帮助开发者掌握React的实战书籍，由 Robin ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值