第二十一章 案例TodoList之新增数据

简介: 第二十一章 案例TodoList之新增数据

前一小节,我们已经完成了数据的动态展示,现在我们要完成数据的动态添加。如何添加呢?肯定是要通过Header组件来添加,但是Header组件如何将收集的任务数据,交给App组件并更新状态数据呢?

在Header组件中收集任务项数据

import React, { Component } from 'react'
import "./index.css"
export default class Header extends Component {
  // 收集输入的任务项数据
  getTodoData = (event) => {
    console.log(event.target.value)
  }
  render() {
    return (
      <div className="todo-header">
          <input onKeyUp={this.getTodoData} type="text" placeholder="请输入你的任务名称,按回车键确认"/>
      </div>
    )
  }
}

我们在组件的输入框元素上面添加了onKeyUp键盘事件,因为事件发生在元素本身,所以我们不要ref,而是通过事件源拿到输入的数据。

改造1:我们想要在按下enter(回车键)时,才打印我们收集的数据

  // 收集输入的任务项数据
  getTodoData = (event) => {
    const {keyCode,target} = event
    if (keyCode === 13) {
      console.log(target.value,keyCode)
    }   
  }

我们可以在事件身上拿到keyCode 和 target 来确认是否按下回车键,以及收集到的值。但是这里有一个问题:那就是输入框没有值时,按下回车键,也可以打印值,这不是我们想要的。

改造2:空值不处理后续逻辑

  // 收集输入的任务项数据
  getTodoData = (event) => {
    const {keyCode,target} = event
    if (target.value.trim() === '') return;
    if (keyCode === 13) {
      console.log(target.value,keyCode)
    }
  }

当我们判断输入框的值是空值,且按下了回车键,我们直接return不做后续处理。

改造3:将输入的任务名称组装为一个Todo对象

  // 收集输入的任务项数据
  getTodoData = (event) => {
    const {keyCode,target} = event
    if (target.value.trim() === '') return;
    if (keyCode === 13) {
      const newTodoObj = {id:'004',name:target.value,done:false}
      console.log(newTodoObj)
    }
  }

这里我们将拿到的输入值,拼装为一个对象,为后续做准备,但是这里有一个问题,那就是id值是004,这是一个固定值,当然我们只添加一条数据肯定没问题,但是我们肯定不止添加一条数据,因为那就没有意义了。

改造4:将ID值变成唯一标识且不重复

这里我们需要安装nanoid使用这个库我们可以生成不重复的uuid

步骤1:安装依赖

npm i nanoid

步骤2:引入依赖并改造代码

import { nanoid } from 'nanoid'  
// 收集输入的任务项数据
  getTodoData = (event) => {
    const {keyCode,target} = event
    if (target.value.trim() === '') return;
    if (keyCode === 13) {
      const newTodoObj = {id:nanoid(),name:target.value,done:false}
      console.log(newTodoObj)
    }
  }

步骤3:查看效果

 { id: "v1NnCpyHxlh4qrKwlv2W1", name: "45151", done: false }

我们可以看到这里的id已经变成长度为21的字符串了,每次方法nanoid()都会生成一个不重复的且默认长度为21的字符串。

将收集的数据交给App组件

我们如何将收集的数据交给App组件呢?答案还是props。但是这次传的props是一个函数,不是普通的值。

image.png

  • 步骤1:在App组件定义一个函数,并使用props传入Header组件。
import React, { Component } from 'react'
import Header from "./components/Header"
import List from "./components/List"
import Footer from "./components/Footer"
import "./index.css"
export default class App extends Component {
  // 定义列表的初始状态数据
  state = {todos: [
    {id:'001',name:'吃饭',done: true},
    {id:'002',name:'睡觉',done: true},
    {id:'003',name:'写代码',done: false},
  ]}
  // 获取Header组件收集的任务项数据
  addTodo = (todoObj) => {
    console.log(todoObj)
  }
  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
      <div className="todo-wrap">
        <Header addTodo={this.addTodo}/>
        <List todos={todos}/>
        <Footer/>
      </div>
    </div>
    )
  }
}
  • 步骤2:Header组件通过addTodo函数将组装的对象作为参数进行传递
  // 收集输入的任务项数据
  getTodoData = (event) => {
    const {keyCode,target} = event
    if (target.value.trim() === '') return;
    if (keyCode === 13) {
      const newTodoObj = {id:nanoid(),name:target.value,done:false}
      this.props.addTodo(newTodoObj)
      target.value = '' // 清空输入框
    }
  }
  • 步骤3:更新App组件的状态数据
  // 获取Header组件收集的任务项数据
  addTodo = (todoObj) => {
    const { todos } = this.state
    const newTodo = [todoObj, ...todos]
    this.setState({todos:newTodo})
  }

这里我们拿到旧的状态数据与Header组件收集的数据组装在一起,在使用setState更新状态,由于会重新渲染页面,所以List组件也是拿到的最新的数据。

小总结

本小节主要学习了一下知识:

  • 使用keyCode属性判断回车键
  • 使用nanoid依赖库生成UUID
  • 使用props传递函数,使得父组件拿到子组件的数据
相关文章
|
6月前
第二十五章 案例TodoList 之删除数据
第二十五章 案例TodoList 之删除数据
|
3月前
|
JavaScript 前端开发 数据处理
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
这篇文章讨论了Vue中实现权限管理的策略,包括接口权限、路由权限、菜单权限和按钮权限的控制方法,并提供了不同的实现方案及代码示例,以确保用户只能访问被授权的资源。
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
|
开发者
【 uniapp - 黑马优购 | 商品列表 】如何实现数据获取、结构渲染、自定义组件的封装
【 uniapp - 黑马优购 | 商品列表 】如何实现数据获取、结构渲染、自定义组件的封装
378 0
|
6月前
|
搜索推荐 JavaScript 前端开发
《vue3实战》运用splice方法实现电影评价系统的查看、修改、删除功能
《vue3实战》运用splice方法实现电影评价系统的查看、修改、删除功能
|
6月前
|
搜索推荐 JavaScript 前端开发
《vue3实战》运用push()方法实现电影评价系统的添加功能
《vue3实战》运用push()方法实现电影评价系统的添加功能
《vue3实战》运用push()方法实现电影评价系统的添加功能
|
6月前
|
JavaScript
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
271 2
|
6月前
|
前端开发 开发者
第二十三章 案例TodoList之数据更新
第二十三章 案例TodoList之数据更新
第二十三章 案例TodoList之数据更新
|
6月前
|
前端开发 JavaScript API
|
6月前
|
前端开发 数据挖掘
第二十章 案例TodoList之动态数据
第二十章 案例TodoList之动态数据
|
6月前
|
前端开发 容器
第十九章 案例TodoList之组件拆分
第十九章 案例TodoList之组件拆分