怎么使用react实现todolist

这篇文章主要介绍了怎么使用react实现todolist的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用react实现todolist文章都会有所收获，下面我们一起来看看吧。 使用react实现todolist的方法：1、新建一个项目文件夹Code；2、通过“create-react-app todo-list”命令创建react项目；3、在components文件夹下新建ToDoList.jsx文件；4、使用一个数组来保存数据，数组中每个元素为一个对象；5、编写页面布局；6、添加键盘事件，监听输入变化，实现待办事项和已办事项即可。添加待办事项，按enter键确定，同时清空输入框；通过checkbox是否勾选可以切换待办和已办事项；点击删除可以删除事项准备之前：本文假定开发环境已配置完成，包括：Node.js已安装；cnpm 已安装； npm install -g cnpm –registry=https://registry.npm.taobao.org脚手架工具已安装； npm install -g create-react-app / cnpm install -g create-react-app1.新建一个项目文件夹Code，使用VSCode,将Code文件加添加到工作区；图2.12.右击Code文件夹，在选项卡中选择在终端中打开；图2.2 3.在终端中输入如下命令，新建React项目: create-react-app todo-list 图2.34.生成Rreact项目如下 :图2.4React开发主要是对src里的文件动手脚，node_modules主要防止各种依赖包，public放置一些公共文件，package.json这些是一些配置文件，在此不详述。在src目录下新建components文件夹，用来放置自己创建的组件；在src目录下新建assets文件加用来防止css文件和图片文件等静态资源；如图2.5所示：图2.5在components文件夹下新建ToDoList.jsx文件，编写如下代码，搭好一个组件的基本框架；代码如下：undefinedimport导入的依赖;组件（class XXX extends React,Component）;构造函数constructor;render函数；export输出组件；使用一个数组来保存数据，数组中每个元素为一个对象，该对象包括两个字段:title和checked,tile为字符串类型，checked为布尔类型，用来区分待办（false）和已办（true）;该数组在this.st免费云主机、域名ate中初始化：页面分为顶部的输入框（input）和下面的 待办事项列表 和已办事项列表；在render中的return中编写（jsx）;在index.js下，引入ToDoList组件然后挂在组件ToDoList简陋渲染效果如下：图3.1添加待办事项（1）使用ref属性，获取input输入值：　　在input标签上设置属性ref=”inputToDo”,然后在方法中可以通过 this.refs.inputToDo.value获取输入值；（2）添加键盘事件，监听输入变化，当输入enter时，添加待办事项；　　使用onKeyUp(键盘弹起)/onKeyDown(键盘按下)事件来监听键盘变化。当键盘变化后，触发添加函数，将输入值添加到待办事项中；代码如下：jsx:addToDo函数：（3）在constructor中使用bind绑定addToDo,这一步是必须的，否则方法不能执行，所有的方法都需要像这样绑定；图3.2效果：　视频3.1输出待办事项和已办事项　　使用map方法，循环遍历数组，输出每组数据；代码如下：checked = {value.checked}表示复选框是否打勾，onChange事件触发一个改变事项状态的方法，index是数组的索引，该方法在下文实现；　　效果：图3.3待办和已办互相转换　　这一步的思路也很简单，其实就是在触发checkbox的onChange事件时，将某一个事项的checked值变为相反的值（true->false/false->true）,所以onChange后的方法需要传入数组的索引值，具体实现代码如下：jsxcheckboxChange
效果：　视频3.2删除事项删除事项比较简单了，思路也是类似的，在button上添加onClick按钮，触发删除事件，传入参数index,然后根据index，使用数组的splice函数，删除某一待办事项。该方法第一个参数是数组中的元素位置，第二个参数是从index开始删除多少个元素。具体实现如下：jsxremoveToDo效果：即为开篇展示的效果样式随便写了一下，不太好看，这里也把代码丢上来吧；index.css引入样式　　在ToDoList.jsx中按如下代码引入index.cssToDoList.jsxView Codeindex.css　index.js　关于“怎么使用react实现todolist”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么使用react实现todolist”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云技术行业资讯频道。

相关推荐: react如何动态修改style

这篇文章主要介绍“react如何动态修改style”，在日常操作中，相信很多人在react如何动态修改style问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react如何动态修改style”的疑惑有所帮助！接下来，请跟着小编一…