第四步.勾选与取消功能 App.jsx中定义一个勾选与取消的方法chekedTodo,通过List.jsx传给item.jsx,拿到input的id与当前的值给父组件,去判断拿到的id与原本的数据中的每一个id对比是否一致,一致的话,就改变当前的done的状态并且把状态值与以前的todo合并起来,否则就原封不动,最后把更新后的值重新设置一下 第五...
}// 清除所以已经完成的任务clearAllDone =() =>{const{ todoList } =this.state;constnewTodos = todoList.filter((item) =>{return!item.done})this.setState({ todoList : newTodos }) }render() {const{ todoList } =this.statereturn(todoList案例<HeaderaddTodo={this.addTodo}/><ListtodoList...
export default TodoItem; index.js /** * 整个项目的入口文件 */ //引入React库,理解语法 import React from 'react'; //引入ReactDom让我们可以将一个组件挂载到DOM组件 import ReactDOM from 'react-dom'; //App组件,大写字母开头 import TodoList from './TodoList'; //将组件渲染到页面上 ReactDOM....
import React, { Component } from 'react';import TodoList from './TodoList';import './app.css';class TodoApp extends Component { constructor(props) { // 构造方法，props 应该是父类的一个成员变量 super(props); this.state = { // 组件状态数据 text: '', items:[{id: 1,...
新增已完成事项与代办事项能切换:在input中新增onChange事件监听,把当前元素的index值传给方法,方法里把原数组中的此元素的checked值改为!checked 完整代码: importReact,{Component}from'react'import'../assets/css/todolist.css'export defaultclassTodolist extends Component{constructor(props)...
最近看到网上很多todolist的案例都是类组件的,发现这样对ReactHooks的初学者来说很不友好。遂编写此文章。(脚手架是官方原生的 create-react-app) 页面效果如下 先不考虑功能,如果当你看到这个图,脑子里还不能清晰的浮现出怎样敲出来这样的排版。我的建议是多写几个页面,千万不要眼高手低。我的建议是你先不要...
如果你正在开始React.js之旅,跟着这个教程一起构建TODO应用可能是一个完美的起点。 先决条件 在我们开始之前,请确保你具备React.js的基本知识,并在计算机上安装了Node.js和npm。如果还没有,请花点时间设置你的开发环境。 我们的目标 我们的目标是创建一个简单的TODO应用,具备以下功能。我们将朝着以下目标努力: ...
建议创建一个有意义的文件夹名称,如“TodoList-React”。 接下来,我们需要初始化这个项目。在项目根目录下打开终端,运行以下命令: npm init -y 这将自动生成一个package.json文件,该文件是Node.js项目的核心配置文件,记录了项目的依赖信息和其他元数据。 二、安装依赖 在React项目中,我们通常需要使用一些额外的库...
这个todo-list 项目,很简单,前端使用 react,后端 nodejs 使用 koa2 进行开发。数据库使用 Mysql。之所以要选择这些框架、数据库,是因为我都不会这些技术,为了学习,所以就使用这些技术进行开发。 在这次的小项目开发中,大概用了1个月的时间吧,平时有空就开始开发或者学习。
首先要有一定的react的基础,里面的一些不做解释(包括项目文件的用法及作用) ### 1. 先安装react的插件 npm install create-react-app -g 只需要安装一次即可 ### 2. 下载react的脚手架 create-react-app 项目名(todo) ### 3.进入todo 启动项目或者运行的时候 ...