React 全栈体系（六）

news/2024/7/15 19:05:18 标签: react.js, 前端, 前端框架

第三章：React 应用(基于 React 脚手架)

二、组件的组合使用 - TodoList

3. 添加 todo

3.1 App

/* src/App.jsx */
//创建“外壳”组件App
import React,{Component} from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

//创建并暴露App组件
export default class App extends Component{

	//初始化状态
	state = {todos:[
		{id:'001',name:'吃饭',done:true},
		{id:'002',name:'睡觉',done:true},
		{id:'003',name:'打代码',done:false},
		{id:'004',name:'逛街',done:false}
	]}

	//addTodo用于添加一个todo，接收的参数是todo对象
	addTodo = (todoObj) => {
		//获取原todos
		const {todos} = this.state
		//追加一个todo
		const newTodos = [todoObj,...todos]
		//更新状态
		this.setState({todos:newTodos})
	}
	render(){
		const {todos} = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos}/>
					<Footer />
				</div>
			</div>
		)
	}
}

3.2 Header

/* src/components/Header/index.jsx */
import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import './index.css'


export default class Header extends Component {

  handleKeyUp = (event) => {
    //解构赋值获取keyCode,target
    const {keyCode, target} = event
    //判断是否是回车按键
    if(event.keyCode !== 13) return
    //添加的todo名字不能为空
	if(target.value.trim() === ''){
		alert('输入不能为空')
		return
	}
    //准备好一个todo对象
    const todoObj = {id:nanoid(), name:target.value, done:false}
    //将todoObj传递给App
    this.props.addTodo(todoObj)
    //清空输入
	target.value = ''
  }
  render() {
    return (
        <div className="todo-header">
            <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
    )
  }
}

4. 鼠标移入效果

Item

/* src/components/Item/index.jsx */
import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
  state = {mouse:false} //标识鼠标移入、移出

  //鼠标移入、移出的回调
	handleMouse = (flag)=>{
		return ()=>{
			this.setState({mouse:flag})
		}
	}

  render() {
    const {name,done} = this.props
    const {mouse} = this.state
    return (
        <li style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
        <label>
            <input type="checkbox" defaultChecked={done}/>
            <span>{name}</span>
        </label>
        <button className="btn btn-danger" style={{display:mouse?'block':'none'}}>删除</button>
        </li>
    )
  }
}

5. 添加一个 todo

5.1 App

/* src/App.jsx */
//创建“外壳”组件App
import React,{Component} from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

//创建并暴露App组件
export default class App extends Component{
	//状态在哪里，操作状态的方法就在哪里

	//初始化状态
	state = {todos:[
		{id:'001',name:'吃饭',done:true},
		{id:'002',name:'睡觉',done:true},
		{id:'003',name:'打代码',done:false},
		{id:'004',name:'逛街',done:false}
	]}

	//addTodo用于添加一个todo，接收的参数是todo对象
	addTodo = (todoObj) => {
		//获取原todos
		const {todos} = this.state
		//追加一个todo
		const newTodos = [todoObj,...todos]
		//更新状态
		this.setState({todos:newTodos})
	}

	//updateTodo用于更新一个todo对象
	updateTodo = (id,done)=>{
		//获取状态中的todos
		const {todos} = this.state
		//匹配处理数据
		const newTodos = todos.map((todoObj)=>{
			if(todoObj.id === id) return {...todoObj,done}
			else return todoObj
		})
		this.setState({todos:newTodos})
	}

	render(){
		const {todos} = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos} updateTodo={this.updateTodo}/>
					<Footer />
				</div>
			</div>
		)
	}
}

5.2 List

/* src/components/List/index.jsx */
import React, { Component } from 'react'
import Item from '../Item'
import './index.css'

export default class List extends Component {
  render() {
    const {todos,updateTodo} = this.props
    return (
        <ul className="todo-main">
          {
            todos.map(todo=> {
              return <Item key={todo.id} {...todo} updateTodo={updateTodo}/>
            })
          }
        </ul>
    )
  }
}

5.3 Item

/* src/components/Item/index.jsx */
import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
  state = {mouse:false} //标识鼠标移入、移出

  //鼠标移入、移出的回调
	handleMouse = (flag)=>{
		return ()=>{
			this.setState({mouse:flag})
		}
	}

  //勾选、取消勾选某一个todo的回调
	handleCheck = (id)=>{
		return (event)=>{
			this.props.updateTodo(id,event.target.checked)
		}
	}

  render() {
    const {id,name,done} = this.props
    const {mouse} = this.state
    return (
        <li style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
        <label>
            <input type="checkbox" defaultChecked={done} onChange={this.handleCheck(id)}/>
            <span>{name}</span>
        </label>
        <button className="btn btn-danger" style={{display:mouse?'block':'none'}}>删除</button>
        </li>
    )
  }
}

6. 对 props 进行限制

6.1 Header

/* src/components/Header/index.jsx */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'
import './index.css'


export default class Header extends Component {

  //对接收的props进行：类型、必要性的限制
	static propTypes = {
		addTodo:PropTypes.func.isRequired
	}

  //键盘事件的回调
  handleKeyUp = (event) => {
    //解构赋值获取keyCode,target
    const {keyCode, target} = event
    //判断是否是回车按键
    if(event.keyCode !== 13) return
    //添加的todo名字不能为空
		if(target.value.trim() === ''){
			alert('输入不能为空')
			return
		}
    //准备好一个todo对象
    const todoObj = {id:nanoid(), name:target.value, done:false}
    //将todoObj传递给App
    this.props.addTodo(todoObj)
    //清空输入
		target.value = ''
  }
  render() {
    return (
        <div className="todo-header">
            <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
    )
  }
}

6.2 List

/* src/components/List/index.jsx */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Item from '../Item'
import './index.css'

export default class List extends Component {
  //对接收的props进行：类型、必要性的限制
	static propTypes = {
		todos:PropTypes.array.isRequired,
		updateTodo:PropTypes.func.isRequired
	}

  render() {
    const {todos,updateTodo} = this.props
    return (
        <ul className="todo-main">
          {
            todos.map(todo=> {
              return <Item key={todo.id} {...todo} updateTodo={updateTodo}/>
            })
          }
        </ul>
    )
  }
}

7. 删除一个 todo

7.1 App

/* src/App.jsx */
//创建“外壳”组件App
import React,{Component} from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

//创建并暴露App组件
export default class App extends Component{
	//状态在哪里，操作状态的方法就在哪里

	//初始化状态
	state = {todos:[
		{id:'001',name:'吃饭',done:true},
		{id:'002',name:'睡觉',done:true},
		{id:'003',name:'打代码',done:false},
		{id:'004',name:'逛街',done:false}
	]}

	//addTodo用于添加一个todo，接收的参数是todo对象
	addTodo = (todoObj) => {
		//获取原todos
		const {todos} = this.state
		//追加一个todo
		const newTodos = [todoObj,...todos]
		//更新状态
		this.setState({todos:newTodos})
	}

	//updateTodo用于更新一个todo对象
	updateTodo = (id,done)=>{
		//获取状态中的todos
		const {todos} = this.state
		//匹配处理数据
		const newTodos = todos.map((todoObj)=>{
			if(todoObj.id === id) return {...todoObj,done}
			else return todoObj
		})
		this.setState({todos:newTodos})
	}

	//deleteTodo用于删除一个todo对象
	deleteTodo = (id)=>{
		//获取原来的todos
		const {todos} = this.state
		//删除指定id的todo对象
		const newTodos = todos.filter((todoObj)=>{
			return todoObj.id !== id
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	render(){
		const {todos} = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
					<Footer />
				</div>
			</div>
		)
	}
}

7.2 List

/* src/components/List/index.jsx */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Item from '../Item'
import './index.css'

export default class List extends Component {
  //对接收的props进行：类型、必要性的限制
	static propTypes = {
		todos:PropTypes.array.isRequired,
		updateTodo:PropTypes.func.isRequired,
    	deleteTodo:PropTypes.func.isRequired
	}

    render() {
	    const {todos,updateTodo,deleteTodo} = this.props
	    return (
	        <ul className="todo-main">
	          {
	            todos.map(todo=> {
	              return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo}/>
	            })
	          }
	        </ul>
	    )
  	}
}

7.3 Item

/* src/components/Item/index.jsx */
import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
    state = {mouse:false} //标识鼠标移入、移出

    //鼠标移入、移出的回调
	handleMouse = (flag)=>{
		return ()=>{
			this.setState({mouse:flag})
		}
	}

    //勾选、取消勾选某一个todo的回调
	handleCheck = (id)=>{
		return (event)=>{
			this.props.updateTodo(id,event.target.checked)
		}
	}

	//删除一个todo的回调
	handleDelete = (id)=>{
		if(window.confirm('确定删除吗？')){
			this.props.deleteTodo(id)
		}
	}

    render() {
	    const {id,name,done} = this.props
	    const {mouse} = this.state
	    return (
	        <li style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
	        <label>
	            <input type="checkbox" defaultChecked={done} onChange={this.handleCheck(id)}/>
	            <span>{name}</span>
	        </label>
	        <button onClick={()=> this.handleDelete(id) } className="btn btn-danger" style={{display:mouse?'block':'none'}}>删除</button>
	        </li>
	    )
 	}
}

8. 实现底部功能

8.1 App

/* src/App.jsx */
import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

export default class App extends Component {
	//状态在哪里，操作状态的方法就在哪里

	//初始化状态
	state = {todos:[
		{id:'001',name:'吃饭',done:true},
		{id:'002',name:'睡觉',done:true},
		{id:'003',name:'打代码',done:false},
		{id:'004',name:'逛街',done:false}
	]}

	//addTodo用于添加一个todo，接收的参数是todo对象
	addTodo = (todoObj)=>{
		//获取原todos
		const {todos} = this.state
		//追加一个todo
		const newTodos = [todoObj,...todos]
		//更新状态
		this.setState({todos:newTodos})
	}

	//updateTodo用于更新一个todo对象
	updateTodo = (id,done)=>{
		//获取状态中的todos
		const {todos} = this.state
		//匹配处理数据
		const newTodos = todos.map((todoObj)=>{
			if(todoObj.id === id) return {...todoObj,done}
			else return todoObj
		})
		this.setState({todos:newTodos})
	}

	//deleteTodo用于删除一个todo对象
	deleteTodo = (id)=>{
		//获取原来的todos
		const {todos} = this.state
		//删除指定id的todo对象
		const newTodos = todos.filter((todoObj)=>{
			return todoObj.id !== id
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	//checkAllTodo用于全选
	checkAllTodo = (done)=>{
		//获取原来的todos
		const {todos} = this.state
		//加工数据
		const newTodos = todos.map((todoObj)=>{
			return {...todoObj,done}
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	//clearAllDone用于清除所有已完成的
	clearAllDone = ()=>{
		//获取原来的todos
		const {todos} = this.state
		//过滤数据
		const newTodos = todos.filter((todoObj)=>{
			return !todoObj.done
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	render() {
		const {todos} = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
					<Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
				</div>
			</div>
		)
	}
}

8.2 Header

/* src/components/Header/index.jsx */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'
import './index.css'

export default class Header extends Component {

	//对接收的props进行：类型、必要性的限制
	static propTypes = {
		addTodo:PropTypes.func.isRequired
	}

	//键盘事件的回调
	handleKeyUp = (event)=>{
		//解构赋值获取keyCode,target
		const {keyCode,target} = event
		//判断是否是回车按键
		if(keyCode !== 13) return
		//添加的todo名字不能为空
		if(target.value.trim() === ''){
			alert('输入不能为空')
			return
		}
		//准备好一个todo对象
		const todoObj = {id:nanoid(),name:target.value,done:false}
		//将todoObj传递给App
		this.props.addTodo(todoObj)
		//清空输入
		target.value = ''
	}

	render() {
		return (
			<div className="todo-header">
				<input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
			</div>
		)
	}
}

8.3 List

/* src/components/List/index.jsx */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Item from '../Item'
import './index.css'

export default class List extends Component {

	//对接收的props进行：类型、必要性的限制
	static propTypes = {
		todos:PropTypes.array.isRequired,
		updateTodo:PropTypes.func.isRequired,
		deleteTodo:PropTypes.func.isRequired,
	}

	render() {
		const {todos,updateTodo,deleteTodo} = this.props
		return (
			<ul className="todo-main">
				{
					todos.map( todo =>{
						return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo}/>
					})
				}
			</ul>
		)
	}
}

8.4 Item

/* src/components/Item/index.jsx */
import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {

	state = {mouse:false} //标识鼠标移入、移出

	//鼠标移入、移出的回调
	handleMouse = (flag)=>{
		return ()=>{
			this.setState({mouse:flag})
		}
	}

	//勾选、取消勾选某一个todo的回调
	handleCheck = (id)=>{
		return (event)=>{
			this.props.updateTodo(id,event.target.checked)
		}
	}

	//删除一个todo的回调
	handleDelete = (id)=>{
		if(window.confirm('确定删除吗？')){
			this.props.deleteTodo(id)
		}
	}


	render() {
		const {id,name,done} = this.props
		const {mouse} = this.state
		return (
			<li style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
				<label>
					<input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
					<span>{name}</span>
				</label>
				<button onClick={()=> this.handleDelete(id) } className="btn btn-danger" style={{display:mouse?'block':'none'}}>删除</button>
			</li>
		)
	}
}

8.5 Footer

/* src/components/Footer/index.jsx */
import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {

	//全选checkbox的回调
	handleCheckAll = (event)=>{
		this.props.checkAllTodo(event.target.checked)
	}

	//清除已完成任务的回调
	handleClearAllDone = ()=>{
		this.props.clearAllDone()
	}

	render() {
		const {todos} = this.props
		//已完成的个数
		const doneCount = todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0),0)
		//总数
		const total = todos.length
		return (
			<div className="todo-footer">
				<label>
					<input type="checkbox" onChange={this.handleCheckAll} checked={doneCount === total && total !== 0 ? true : false}/>
				</label>
				<span>
					<span>已完成{doneCount}</span> / 全部{total}
				</span>
				<button onClick={this.handleClearAllDone} className="btn btn-danger">清除已完成任务</button>
			</div>
		)
	}
}

三、总结

1.拆分组件、实现静态组件，注意：className、style的写法
2.动态初始化列表，如何确定将数据放在哪个组件的state中？
			——某个组件使用：放在其自身的state中
			——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
3.关于父子之间通信：
		1.【父组件】给【子组件】传递数据：通过props传递
		2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value
5.状态在哪里，操作状态的方法就在哪里

http://www.niftyadmin.cn/n/5024659.html

相关文章

DNG格式详解，DNG是什么？为何DNG可以取代RAW统一单反相机、苹果安卓移动端相机拍摄输出原始图像数据标准

DNG格式详解，DNG是什么？为何DNG可以取代RAW统一单反相机、苹果安卓移动端相机拍摄输出原始图像数据标准

返回图像处理总目录&#xff1a;《JavaCV图像处理合集总目录》 前言 在DNG格式发布之前&#xff0c;我们先了解一下之前单反相机、苹果和安卓移动端相机拍照输出未经处理的原始图像格式是什么&#xff1f; RAW 什么是RAW&#xff1f; RAW是未经处理、也未经压缩的格式。可以…
阅读更多...
Linux系统——初识Linux、虚拟机介绍、VMware WorkStation安装、在VMware上安装Linux

Linux系统——初识Linux、虚拟机介绍、VMware WorkStation安装、在VMware上安装Linux

目录 初识Linux Linux的诞生 Linux内核 Linux发行版 虚拟机介绍 VMware WorkStation安装 在VMware上安装Linux 在VMware中安装CentOS操作系统 初识Linux Linux的诞生 Linux创始人: 林纳斯 托瓦兹 Linux 诞生于1991年&#xff0c;作者上大学期间 因为创始人在上大学期…
阅读更多...
thinkphp：判断数据是否存在，再作为数据库的判断条件（给数据库查询增加额外的查询条件）

thinkphp：判断数据是否存在，再作为数据库的判断条件（给数据库查询增加额外的查询条件）

方法一&#xff1a;用thinkphp的语法去写 public function select_endProduceinfo(){$like_info input(post.like_info, );$page input(post.page, 1);$pageSize input(post.pageSize, 10);$start ($page - 1) * $pageSize;$username input(post.username,);$search_line…
阅读更多...
✔ ★算法基础笔记（Acwing）（二）—— 数据结构（17道题）【java版本】

✔ ★算法基础笔记（Acwing）（二）—— 数据结构（17道题）【java版本】

数据结构 1. 单链表模板1. 单链表(7分钟) 2. 双链表模板1. 双链表 3. 模拟栈1. 模拟栈(一个数组即可)2. 表达式求值(20分钟) 4. 队列 tt -1,hh 0;1. 模拟队列 5. 单调栈1. 单调栈(4分钟)3.14 6. 单调队列1. 滑动窗口例题(10分钟) 7. KMP1. KMP字符串(10分钟)二刷体会★三刷体…
阅读更多...
stm32单片机之外部脉冲捕获例程

stm32单片机之外部脉冲捕获例程

stm32单片机之外部脉冲捕获例程 定时器通道1来捕获外部脉冲&#xff0c;并且当脉冲到来时&#xff0c;通过HAL库的回调函数来处理这个事件。 #include "stm32f4xx_hal.h" // 定义一个TIM_HandleTypeDef结构体 TIM_HandleTypeDef htim1; void SystemClock_Config(…
阅读更多...
javase javaee javame

javase javaee javame

1.JavaSE JavaSE&#xff08;Java Platform&#xff0c;Standard Edition&#xff09; &#xff1a;Java平台标准版。它是 JavaEE 和 JavaME 的基础&#xff0c;之前称为 J2SE&#xff0c;用来开发C/S架构软件&#xff0c;通俗来讲&#xff0c;就是开发电脑桌面的应用软件、电脑…
阅读更多...
Unity中程序集dll

Unity中程序集dll

一&#xff1a;前言 一个程序集由一个或多个文件组成&#xff0c;通常为扩展名.exe和.dll的文件称为程序集&#xff0c;.exe是静态的程序集&#xff0c;可以在.net下直接运行加载&#xff0c;因为exe中有一个main函数(入口函数&#xff09;&#xff0c;.dll是动态链接库&#…
阅读更多...
《PostgreSQL中的JSON处理：技巧与应用》

《PostgreSQL中的JSON处理：技巧与应用》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…
阅读更多...
最新文章

Copyright @ 2022~2023