TodoList 案例在前端学习中挺重要的,从原生 JavaScript 的增删查改,到现在 React 的组件通信,都是一个不错的案例,这篇文章主要记录,还原一下通过 React 实现 TodoList 的全过程 一、拆分组件 首先第一步需要做的是将这个页面拆分成几个组件 首先顶部的输入框,可以完成添加项目的功能,可以拆分成一个Header 组
//导入React相关依赖importReactfrom'react';//创建一个组件classToDoListextendsReact.Component{//构造函数constructor(props){super(props);//this是父组件(类)的一个实例,实例就类似于java里的一个类,创建了这个类型的一个对象,这个对象就是实例this.state={//this.state里可以写一些初始化的数据}}//render渲...
}// 清除所以已经完成的任务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...
如果要把 react 项目部署到 GitHub Pages 的话,需要: 1.把 .gitignore 里的 build 一行删除 2.在 package.json 中添加:"homepage": "https://no1harm.github.io/react-todolist/build"(后面的值为 gitpages 链接地址 + /build) 3.运行cnpm build 4.重新 push 上 GitHub,可以看到项目的正常预览了。 入...
import React, { Component } from 'react' import Header from './components/Header' import Footer from './components/Footer' import List from './components/List' import './App.css'; export default class App extends Component { state = { todoList: [ { id: 1, name: "吃饭", done: true...
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: ...
起因是,为了指导一个小伙伴做毕设,顺便教教他学前端,我拿出了React。 MDN通过一个Todo List App的制作,教导React的知识点。 这是我在MDN学习React的总结,总结出了一些React开发的基本特性,加上MDN上这个教程的简体中文还没翻译过来,我的总结就更有意义了。
React入门实战实例——ToDoList实现,最近学习了一小段时间的React,对一些React开发组件的基础有了一点认识,跟着教学视频,自己实现了一个ToDoList组件的功能,今天把做这个组件的过程记录一下,加深学习印象,给同样的前端入门者做一个参考。...
react--todoList 代码 import React, { Component } from 'react' class App extends Component { constructor(props) { super(props); this.state = { list: [ { title: "任务一", checked: false }, { title: "任务二", checked: true },...
代码实现我们可以确定大概的功能有发布事件,删除事件,显示事件内容和截止日期,统计事件等。依照以上功能可以做出大概的组件划分图其中ToDoListInput为发布...