React实现TodoList案例

最新推荐文章于 2024-06-26 16:11:39 发布
最新推荐文章于 2024-06-26 16:11:39 发布
阅读量542 收藏 2
点赞数 1
分类专栏： React基础入门教程 文章标签： reactjs 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p445098355/article/details/105217947
版权

1.创建 Todolist.js 组件

import React from 'react';

class TodoList extends React.Component{

  //构造方法
  constructor(props){
    super(props);
    this.state = {
      list: [
        'learn html',
        'learn css',
        'learn react',
        'learn vue'
      ]
    }
  }

  //按钮点击事件方法
  handleBtnClick(){
    this.setState({
      list: [...this.state.list,'hello world'] //...为展开运算符，将this.state.list内容放到当前的list中
    });
  }

  render(){
    return (
      <div>
        <div>
          <input type="text"></input>
          <button onClick={this.handleBtnClick.bind(this)}>添加</button>
        </div>
        <ul>
          {/* key属性为唯一值，没有该属性，浏览器会报警告信息，在做添加操作时会出bug */}
          {this.state.list.map((item,index) => <li key={index}>{item}</li>)}
        </ul>

      </div>
    );
  }
}

export default TodoList;

引用组件

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

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

2.添加列表项功能

代码示例：

import React from 'react';

class TodoList extends React.Component{

  //构造方法
  constructor(props){
    super(props);
    this.state = {
      list: [],  //展示列表
      inputValue:'' //记录输入框的值
    }
  }

  按钮点击事件方法
  handleBtnClick(){
    this.setState({
      list: [...this.state.list,this.state.inputValue], //...为展开运算符，将this.state.list内容放到当前的list中
      inputValue: '' //点击添加按钮，清空输入框
    });
  }

  //输入框输入事件方法
  handleInputChange(e){
    this.setState({
      inputValue: e.target.value
    });
  }

  render(){
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}></input>
          <button onClick={this.handleBtnClick.bind(this)}>添加</button>
        </div>
        <ul>
          {this.state.list.map((item,index) => <li key={index}>{item}</li>)}
        </ul>

      </div>
    );
  }
}

export default TodoList;

3.删除列表元素

删除列表元素代码：

import React from 'react';

class TodoList extends React.Component{

  //构造方法
  constructor(props){
    super(props);
    this.state = {
      list: [],  //展示列表
      inputValue:'' //记录输入框的值
    }
  }

  按钮点击事件方法
  handleBtnClick(){
    this.setState({
      list: [...this.state.list,this.state.inputValue], //...为展开运算符，将this.state.list内容放到当前的list中
      inputValue: '' //点击添加按钮，清空输入框
    });
  }

  //输入框输入事件方法
  handleInputChange(e){
    this.setState({
      inputValue: e.target.value
    });
  }

  //点击展示列表事件方法，用于删除展示元素
  handleItemClick(index){
    const list = [...this.state.list];
    list.splice(index,1);
    this.setState({
      list: list
    });
  }

  render(){
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}></input>
          <button onClick={this.handleBtnClick.bind(this)}>添加</button>
        </div>
        <ul>
          {this.state.list.map((item,index) => {
            return <li onClick={this.handleItemClick.bind(this,index)} key={index}>
                    {item}
                  </li>
          })}
        </ul>

      </div>
    );
  }
}

export default TodoList;

4.使用组件化实现删除功能

创建子组件 TodoItem.js

import React from 'react';

class TodoItem extends React.Component{

    //点击元素删除的方法
    //子组件如果想和父组件通信，子组件要调用父组件传递过来的方法
    handleDelete(){
        //调用父组件的方法，向父组件传值
        this.props.delete(this.props.index);
    }

    render(){
        return (
            <div onClick={this.handleDelete.bind(this)}>
                {/* 子组件通过props接收父组件传递过来的参数 */}
                {this.props.content}
            </div>
        );
    }
}

export default TodoItem;

在父组件 TodoList.js 中调用子组件

import React from 'react';
import TodoItem from './TodoItem';

class TodoList extends React.Component{

  //构造方法
  constructor(props){
    super(props);
    this.state = {
      list: [],  //展示列表
      inputValue:'' //记录输入框的值
    }
  }

  按钮点击事件方法
  handleBtnClick(){
    this.setState({
      list: [...this.state.list,this.state.inputValue], //...为展开运算符，将this.state.list内容放到当前的list中
      inputValue: '' //点击添加按钮，清空输入框
    });
  }

  //输入框输入事件方法
  handleInputChange(e){
    this.setState({
      inputValue: e.target.value
    });
  }

  //点击元素删除的方法，该方法是用来接收子组件的传值
  handelDeleteItem(index){
    const list = [...this.state.list];
    list.splice(index,1);
    this.setState({
      list: list
    });
  }

  render(){
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}></input>
          <button onClick={this.handleBtnClick.bind(this)}>添加</button>
        </div>
        <ul>
          {this.state.list.map((item,index) => {
            //父组件通过属性的形式向子组件传递参数
            return <TodoItem 
            			delete={this.handelDeleteItem.bind(this)} 
            			key={index} 
            			content={item} 
            			index={index}>
            		</TodoItem>
          })}
        </ul>

      </div>
    );
  }
}

export default TodoList;

5.代码优化

TodoItem.js 代码优化：

import React from 'react';

class TodoItem extends React.Component{

    //构造方法
    constructor(props){
        super(props);
        this.handleDelete = this.handleDelete.bind(this);
    }

    //点击元素删除的方法
    //子组件如果想和父组件通信，子组件要调用父组件传递过来的方法
    handleDelete(){
        const { handelDelete , index } = this.props;
        //调用父组件的方法，向父组件传值
        handelDelete(index);
    }

    render(){
        const { content } = this.props;
        return (
            <div onClick={this.handleDelete}>{content}</div>
        );
    }
}

export default TodoItem;

TodoList.js 代码优化：

import React from 'react';
import TodoItem from './TodoItem';

class TodoList extends React.Component{

  //构造方法
  constructor(props){
    super(props);
    this.state = {
      list: [],  //展示列表
      inputValue:'' //记录输入框的值
    }
    
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handelDeleteItem = this.handelDeleteItem.bind(this);
  }

  按钮点击事件方法
  handleBtnClick(){
    this.setState({
      list: [...this.state.list,this.state.inputValue], //...为展开运算符，将this.state.list内容放到当前的list中
      inputValue: '' //点击添加按钮，清空输入框
    });
  }

  //输入框输入事件方法
  handleInputChange(e){
    this.setState({
      inputValue: e.target.value
    });
  }

  //点击元素删除的方法，该方法是用来接收子组件的传值
  handelDeleteItem(index){
    const list = [...this.state.list];
    list.splice(index,1);
    this.setState({
      list: list
    });
  }

  //遍历方法
  getTodoItems(){
    return (
      this.state.list.map((item,index) => {
        //父组件通过属性的形式向子组件传递参数
        return <TodoItem 
                  handelDelete={this.handelDeleteItem} 
                  key={index} 
                  content={item} 
                  index={index} />
      })
    );
  }

  render(){
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange}></input>
          <button onClick={this.handleBtnClick}>添加</button>
        </div>
        <ul>
          {this.getTodoItems()}
        </ul>

      </div>
    );
  }
}

export default TodoList;

6.使用CSS样式修饰

方法一：使用style属性

代码示例：

<button style={{background:'blue',color:'#fff'}} onClick={this.handleBtnClick}>
	添加
</button>

方法二：使用className属性

创建 style.css 文件

.red-btn{
    background-color: red;
    color: #ffffff;
}

在 index.js 入口文件引入 css

import './style.css';

在组件中使用 className 属性

 <button className='red-btn' onClick={this.handleBtnClick}>添加</button>

7.JSX代码优化

render() 方法 return 的 JSX 代码需要在最外层使用一个标签包裹，如果不想在页面中显示最外层的这个标签，可以使用 <React.Fragment> 标签替代，代码示例：

render(){
    return (
      <React.Fragment>
        <div>
          <input />
          <button>添加</button>
        </div>
        <ul>
          {this.getTodoItems()}
        </ul>
      </React.Fragment>
    );
  }

也可以在引入组件时直接引入类，在使用时就不需要用 React 调用

引入

import React,{Component,Fragment} from 'react';
class TodoList extends Component{
render(){
    return (
      <Fragment>
        <div>
          <input />
          <button>添加</button>
        </div>
        <ul>
          {this.getTodoItems()}
        </ul>
      </Fragment>
    );
  }
}
export default TodoList;
柯晓楠
关注
专栏目录
React版本的todoList案例源码
09-01
todoList绝对是前端必做的demo之一，各种版本的todoList大家肯定都接触过，这个React版本的你也绝对不能错过。里面用到了React16+typescript新增的React Hooks的这个新技术，在函数式组件里React Hooks是必须掌握的技术。这个todoList中吧包含了对useState、useReducer、useCallback的使用，你会根据这个待做列表的功能，学会进行组件的划分、单独组件的编写、React Hooks的使用、能够快速熟悉函数式组件中如何获取接口数据渲染列表、删除、新增和修改状态的实现。里面的数据模拟还用到了json-server来模拟后台数据的发送，还原真实场景。做完这个案例，你会更了解React和typescript的编码和结构。
初探react，用react实现一个todoList功能
moandaylab
10-12 3673
初探react，用react实现一个todoList功前言一、react基础1. react简介2. 开发环境搭建3. 工程目录文件简介4. react中最基础的JSX语法二、使用react编写TodoList功能1. 页面构思2. React中的响应式设计思想和事件绑定3. 实现TodoList新增删除功能（1）新增功能（2）删除功能三、对TodoList功能进行进阶操作1. JSX语法细节补充（1）自动转义（2）光标聚焦2. 拆分组件与组件之间的传值3. TodoLi
react学习——17react中todoList案列
最新发布
ChenJin_2的博客
06-26 446
react学习——17react中todoList案列
21、react 制作一个 todoList 组件
大家好，我是+V
09-20 968
上一篇博文我们说了 react 脚手架创建并使用一个组件，OK，那么重点来喽，每个框架学习的必做案例，todoList 功能。
保姆级别手把手教写React的todolist案例
qq_52139998的博客
10-09 1293
TodoList是一个前端学习很不错的案例，不管是用原生javascript,还是vue，React来实现TodoList的功能，在前端学习中都是很重要的，这篇文章用React来实现简单的一个TodoList案例
react实现todolist
qq_37473645的博客
07-22 1160
使用React做一个简单的todolist小demo新建一个react项目 todolist写出todolist的基本结构用数组把数据存储起来监听输入框里面的内容,与state 里的inputValue绑定起来实现增加功能实现删除功能将li提取出来用单独作为一个组件，利用props传值修改删除功能，实现子组件通过父组件传过来的方法对父组件通信 新建一个react项目 todolist // 创建r...
React实现TodoList效果案例
04-02
使用 React 脚手架实现 TodoList 功能 功能: 组件化实现此功能 1. 显示所有todo列表 2. 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本 实现方式： App.js 为父组件，通过组件之间的传参来实现所有功能
react 的 todoList 案例代码
06-20
在这个"todoList"案例中，我们将深入探讨React如何实现一个简单的待办事项列表应用。这个例子可以帮助初学者理解React的基本概念，如组件、状态和生命周期方法。 首先，React组件是构建应用程序的基础。在"todoList...
react-todolist练习资源
05-12
在这个压缩包文件中，"todolist案例"很可能包含了完成上述步骤的代码示例，你可以通过阅读和运行这些代码来进一步理解和学习React的类组件以及如何构建一个简单的交互式应用。同时，这也会帮助你熟悉React的开发流程...
React版本的Todolist案例源码-组件化
04-19
React Todolist组件化案例是一个使用React框架开发的待办事项列表应用程序。该应用程序将待办事项列表分解为多个可重用的组件，包括添加待办事项、显示待办事项列表和标记已完成的待办事项等组件。通过组件化的方式...
React之Todolist
Nathan_Qian的博客
01-03 564
1
React实现Todolist
csdn_zsdf的博客
03-15 9679
一个todolist基本的功能点包括： 点击复选框标记完成或者未完成，且相应的文字出现删除线 从列表中移除item 添加item 首先它是由todolist title 、todolist、和addtodo三部分组成。由于todolist title 和addtodo比较简单，在这里只将todolist拆分成组件。 创建一个ListItem组件。含有一个render方法 class List...
React学习案例（1）——TodoList
icemwj的博客
03-16 295
React学习案例（1）——TodoList（class组件实现和函数组件实现）
使用React 实现简单TodoList功能
m0_69853343的博客
07-14 275
2.执行add del函数的时候要创建一个副本 newlist=[...list]，因为react使用setvalue方法渲染页面时，原始数据名称不能和新的数据名称相同，否则无法更新渲染数据。2.给input标签绑定onChange事件 e.target.value会拿到input输入的值 再执行setinputvalue()更新数据，渲染页面。1.删除功能执行的时候，onClick=（）记得里面绑定一个回调函数，而不是立即执行函数。四、如何将数组里的值遍历渲染到页面上（类似于vue的v-for效果）
React基础教程：TodoList案例
WwLK123的博客
06-12 938
react的状态state学习的经典案例：todolist
使用react实现一个todoList
浪头的博客
05-01 2213
王元肉==>个人主页 大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。 推荐阅读 文章结构创建项目编写todoList的基本结构实现input框的双向绑定实现新增，删除功能实现修改功能 创建项目 npx create-react-app web 使用react脚手架创建项目，项目名称为web cd web co
React入门 - 06（TodoList 列表数据的新增和删除）
千里之行，始于足下！
01-10 1772
React入门 - 06（TodoList 列表数据的新增和删除）
React学习(三)——实现TodoList
陈怂怂的博客
01-14 397
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-TodoList案例
weixin_57218747的博客
06-09 926
TodoList案例 一 TodoList案例_静态组件 需要理解的概念有： 根据目标页面进行组件拆分规划 样式内容的变化className与style的变化 样式文件的拆分App.css以及各个模块的xxx.css样式文件 如果是全局样式，可以考虑在public里进行引入 todos的静态页面(opens new window) src/App.js import Header from './components/Header'; import Footer from './components
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柯晓楠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值