怎么使用react实现todolist

这篇文章主要介绍了怎么使用react实现todolist的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用react实现todolist文章都会有所收获，下面我们一起来看看吧。

创新互联建站专业为企业提供东平网站建设、东平做网站、东平网站设计、东平网站制作等企业网站建设、网页设计与制作、东平企业网站模板建站服务，10多年东平做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

使用react实现todolist的方法：1、新建一个项目文件夹Code；2、通过“create-react-app todo-list”命令创建react项目；3、在components文件夹下新建ToDoList.jsx文件；4、使用一个数组来保存数据，数组中每个元素为一个对象；5、编写页面布局；6、添加键盘事件，监听输入变化，实现待办事项和已办事项即可。

一、实例展示和功能介绍

1.1 实例展示

怎么使用react实现todolist

1.2 功能介绍

添加待办事项，按enter键确定，同时清空输入框；
通过checkbox是否勾选可以切换待办和已办事项；
点击删除可以删除事项

二、准备工作

2.1 环境配置提醒

准备之前：本文假定开发环境已配置完成，包括：

Node.js已安装；
cnpm 已安装； npm install -g cnpm --registry=https://registry.npm.taobao.org
脚手架工具已安装； npm install -g create-react-app / cnpm install -g create-react-app

2.2 新建React项目

1.新建一个项目文件夹Code，使用VSCode,将Code文件加添加到工作区；

怎么使用react实现todolist

图2.1

2.右击Code文件夹，在选项卡中选择在终端中打开；

怎么使用react实现todolist

图2.2

3.在终端中输入如下命令，新建React项目: create-react-app todo-list

图2.3

4.生成Rreact项目如下 :

怎么使用react实现todolist

图2.4

React开发主要是对src里的文件动手脚，node_modules主要防止各种依赖包，public放置一些公共文件，package.json这些是一些配置文件，在此不详述。

2.3 文件分类

在src目录下新建components文件夹，用来放置自己创建的组件；
在src目录下新建assets文件加用来防止css文件和图片文件等静态资源；

如图2.5所示：

怎么使用react实现todolist

图2.5

三、实现过程

3.1 创建组件ToDoList

在components文件夹下新建ToDoList.jsx文件，编写如下代码，搭好一个组件的基本框架；代码如下：

//导入React相关依赖
import React from 'react';

//创建一个组件
class ToDoList extends React.Component{
   //构造函数
   constructor(props){
       super(props);
       //this是父组件（类）的一个实例，实例就类似于java里的一个类，创建了这个类型的一个对象，这个对象就是实例
       this.state = {
           //this.state里可以写一些初始化的数据
       }
   }


   //render渲染虚拟DOM
   render(){

       return(
           
               ToDoList
           

       );
   }

}


//输出组件,使得该组件可以被其他组件调用
export default ToDoList;

undefined

import导入的依赖;
组件（class XXX extends React,Component）;
构造函数constructor;
render函数；
export输出组件；

3.2 功能实现与解析

1.初始化数据

使用一个数组来保存数据，数组中每个元素为一个对象，该对象包括两个字段:title和checked,tile为字符串类型，checked为布尔类型，用来区分待办（false）和已办（true）;

 list:[
               {
                   title:'吃饭',
                   checked:true
               },
               {
                   title:'跑步',
                   checked:false
               },
               {
                   title:'上班',
                   checked:false
               },
               {
                   title:'睡觉',
                   checked:true
               },
      ]

该数组在this.state中初始化：

 constructor(props){
       super(props);
       //this是父组件（类）的一个实例，实例就类似于java里的一个类，创建了这个类型的一个对象，这个对象就是实例
       this.state = {
           //this.state里可以写一些初始化的数据
           list:[
               {
                   title:'吃饭',
                   checked:true
               },
               {
                   title:'跑步',
                   checked:false
               },
               {
                   title:'上班',
                   checked:false
               },
               {
                   title:'睡觉',
                   checked:true
               },
           ],
       }
   }

2.编写页面布局

页面分为顶部的输入框（input）和下面的 待办事项列表和已办事项列表；在render中的return中编写（jsx）;

    render(){

       return(
           
                TodoList: 　 


               待办事项


               

               
               
                   {/* 多个li，后面会循环输出 */}
                   
                        -- 
                   

               
          



               已完成事项


               

               
                   {/* 多个li，后面会循环输出 */}
                   
                        -- 
                   

               
    
           

       );
   }

3.挂载到根节点下

在index.js下，引入ToDoList组件

import ToDoList from './components/ToDoList';

然后挂在组件ToDoList

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import ToDoList from './components/ToDoList';

ReactDOM.render(
 
   {/* 此处是ToDoList组件 */}
     
 ,
 document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

简陋渲染效果如下：

图3.1

3.功能实现

添加待办事项

（1）使用ref属性，获取input输入值：

在input标签上设置属性ref="inputToDo",然后在方法中可以通过 this.refs.inputToDo.value获取输入值；

（2）添加键盘事件，监听输入变化，当输入enter时，添加待办事项；

使用onKeyUp(键盘弹起)/onKeyDown(键盘按下)事件来监听键盘变化。当键盘变化后，触发添加函数，将输入值添加到待办事项中；代码如下：

jsx:

TodoList:

addToDo函数：

    addToDo = (event) => {
       console.log(event.keyCode);
       if(event.keyCode === 13)
       {
           let tempList = this.state.list;
           tempList.push({
               title:this.refs.inputToDo.value,
               checked:false,
           });
           this.setState({
               list:tempList,
           });
           this.refs.inputToDo.value = '';
       }
   }

（3）在constructor中使用bind绑定addToDo,这一步是必须的，否则方法不能执行，所有的方法都需要像这样绑定；

 this.addToDo = this.addToDo.bind(this);

怎么使用react实现todolist

图3.2

效果：

怎么使用react实现todolist

视频3.1

输出待办事项和已办事项

使用map方法，循环遍历数组，输出每组数据；代码如下：

 
                   {/* 多个li，后面会循环输出 */}
                   {
                       this.state.list.map((value,index)=>{
　　　　　　　　　　　　　　{/*checked为false表示待办*/}
                           if(!value.checked)
                           {
                               return (
                                   
　　　　　　　　　　　　　　　　　　　　　　　{/* */}
                                        {value.title}-- 
                                   

                               );
                           }

                       })
                   }

checked = {value.checked}表示复选框是否打勾，onChange事件触发一个改变事项状态的方法，index是数组的索引，该方法在下文实现；

效果：

怎么使用react实现todolist

图3.3

待办和已办互相转换

这一步的思路也很简单，其实就是在触发checkbox的onChange事件时，将某一个事项的checked值变为相反的值（true->false/false->true）,所以onChange后的方法需要传入数组的索引值，具体实现代码如下：

jsx

 {value.title}--

checkboxChange

checkboxChange = (index) => {
     let tempList = this.state.list;
     tempList[index].checked = !tempList[index].checked;
     this.setState({
         list:tempList,
    });
}

效果：

怎么使用react实现todolist

视频3.2

删除事项

删除事项比较简单了，思路也是类似的，在button上添加onClick按钮，触发删除事件，传入参数index,然后根据index，使用数组的splice函数，删除某一待办事项。

arrayA.splice(index,n)

该方法第一个参数是数组中的元素位置，第二个参数是从index开始删除多少个元素。

具体实现如下：

jsx

  
       {value.title}
      --

removeToDo

    removeToDo = (index) => {
       let tempList = this.state.list;
       tempList.splice(index,1);
       this.setState({
           list:tempList,
       });
   }

效果：即为开篇展示的效果

3.3 编写样式

样式随便写了一下，不太好看，这里也把代码丢上来吧；

index.css

.list{

 padding: 10px;
}

.list li{

 line-height: 40px;
 margin-left: 30px;
}

.title{

 height: 44px;

 line-height: 44px;

 text-align: center;

 background: #000;

 color:#fff;
}

.title input{

 height: 40px;
}


.container{
 width: 800px;
 height: 1000px;
 margin-left: auto;
 margin-right: auto;
 background-color:  #D0D0D0;
 border: #fff solid 1px;
 border-radius: 5px;
}

.container h3{
 margin-left: 20px;
}

.del-btn {
 float: right;
 margin-right: 30px;
}

引入样式

在ToDoList.jsx中按如下代码引入index.css

import '../assets/index.css';

3.4 整体效果

怎么使用react实现todolist

四、整体代码

ToDoList.jsx

//导入React相关依赖
import React from 'react';
import '../assets/index.css';

//创建一个组件
class ToDoList extends React.Component{
   //构造函数
   constructor(props){
       super(props);
       //this是父组件（类）的一个实例，实例就类似于java里的一个类，创建了这个类型的一个对象，这个对象就是实例
       this.state = {
           //this.state里可以写一些初始化的数据
           list:[
               {
                   title:'吃饭',
                   checked:true
               },
               {
                   title:'跑步',
                   checked:false
               },
               {
                   title:'上班',
                   checked:false
               },
               {
                   title:'睡觉',
                   checked:true
               },
           ],
       }

       this.addToDo = this.addToDo.bind(this);
       this.checkboxChange = this.checkboxChange.bind(this);
   }

   addToDo = (event) => {
       console.log(event.keyCode);
       if(event.keyCode === 13)
       {
           let tempList = this.state.list;
           tempList.push({
               title:this.refs.inputToDo.value,
               checked:false,
           });
           this.setState({
               list:tempList,
           });
           this.refs.inputToDo.value = '';
       }
   }


   checkboxChange = (index) => {
       let tempList = this.state.list;
       tempList[index].checked = !tempList[index].checked;
       this.setState({
           list:tempList,
       });
   }

   removeToDo = (index) => {
       let tempList = this.state.list;
       tempList.splice(index,1);
       this.setState({
           list:tempList,
       });
   }

   //render渲染虚拟DOM
   render(){

       return(
           
                TodoList: 　 

                   
                       待办事项


                       


                       
                           {/* 多个li，后面会循环输出 */}
                           {
                               this.state.list.map((value,index)=>{
                                   if(!value.checked)
                                   {
                                       return (
                                           
                                                {value.title}
                                               
                                           

                                       );
                                   }

                               })
                           }
                       
                       
          
                       已完成事项


                       

                       
                           {/* 多个li，后面会循环输出 */}
                           {
                               this.state.list.map((value,index)=>{
                                   if(value.checked)
                                   {
                                       return (
                                           
                                                {value.title}
                                               
                                           

                                       );
                                   }
                               })
                           }
                       
    
                
              
           

       );
   }

}


//输出组件,使得该组件可以被其他组件调用
export default ToDoList;

View Code

index.css

.red{

 color:red;
}


.list{

 padding: 10px;
}

.list li{

 line-height: 40px;
 margin-left: 30px;
}

.title{

 height: 44px;

 line-height: 44px;

 text-align: center;

 background: #000;

 color:#fff;
}

.title input{

 height: 40px;
}


.container{
 width: 800px;
 height: 1000px;
 margin-left: auto;
 margin-right: auto;
 background-color:  #D0D0D0;
 border: #fff solid 1px;
 border-radius: 5px;
}

.container h3{
 margin-left: 20px;
}

.del-btn {
 float: right;
 margin-right: 30px;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import ToDoList from './components/ToDoList';

ReactDOM.render(
 
   {/*  */}
   
 ,
 document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

关于“怎么使用react实现todolist”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么使用react实现todolist”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。

分享标题：怎么使用react实现todolist
网页网址：http://chengdu.cdxwcx.cn/article/pgigoh.html

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

怎么使用react实现todolist

一、实例展示和功能介绍

1.1 实例展示

1.2 功能介绍

二、准备工作

2.1 环境配置提醒

2.2 新建React项目

2.3 文件分类

三、实现过程

3.1 创建组件ToDoList

3.2 功能实现与解析

1.初始化数据

2.编写页面布局

待办事项

已完成事项

3.挂载到根节点下

3.功能实现

3.3 编写样式

3.4 整体效果

四、整体代码

待办事项

已完成事项

其他资讯

怎么在iOS中利用摄像头获取环境光感参数-创新互联

Golang中的类型和变量以及常量的示例分析-创新互联

Mysql5.7基目录data文件夹缺失如何解决-创新互联

在debian中如何安装Java环境-创新互联

C++测试框架Gtest学习——qt版本-创新互联

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

怎么使用react实现todolist

一、实例展示和功能介绍

1.1 实例展示

1.2 功能介绍

二、准备工作

2.1 环境配置提醒

2.2 新建React项目

2.3 文件分类

三、实现过程

3.1 创建组件ToDoList

3.2 功能实现与解析

1.初始化数据

2.编写页面布局

待办事项

已完成事项

3.挂载到根节点下

3.功能实现

3.3 编写样式

3.4 整体效果

四、整体代码

待办事项

已完成事项

其他资讯

怎么在iOS中利用摄像头获取环境光感参数-创新互联

Golang中的类型和变量以及常量的示例分析-创新互联

Mysql5.7基目录data文件夹缺失如何解决-创新互联

在debian中如何安装Java环境-创新互联

C++测试框架Gtest学习——qt版本-创新互联

成都网站建设设计将想法与焦点和您一起共享