react-todolist 实现添加功能

最新推荐文章于 2022-05-09 13:45:50 发布

逆风飞翔的代码单身狗

最新推荐文章于 2022-05-09 13:45:50 发布

阅读量481

点赞数

分类专栏： react 文章标签： react javascript

本文链接：https://blog.csdn.net/weixin_41530639/article/details/107282338

版权

本文介绍了如何在React应用中实现TodoList的添加功能。通过用户输入信息，点击按钮触发添加事件，利用json-server操作mock/todo.json。通过设置唯一ID（基于时间戳）确保数据不重复，并详细阐述了子组件如何调用父组件的方法来完成数据的添加操作。

摘要由CSDN通过智能技术生成

todoinput 添加代办事项：

首先我们想好基本流程：
用户输入信息，我们需要通过输入框拿到数据—>点击按钮触发添加事件—>
操作mock/todo.json：
首先我们来试一下json-server创建的端口是否可用:
在这里插入图片描述

前八个是自己瞎写的，最后一个是实现了添加功能之后插入的
PS：
这里的id是主键，为了遵循主键的不重复性，我们想到用获取时间，
因为70.1.1是计算机诞生日，所以那一天为计算机的公元纪年，今后的每一秒都是从那时候算起的，所以不可能重复

我们要拿到输入框的数据
App.js

import React, {
    Component } from 'react'
import TodoHeader from './components/header/toheader.jsx'
import TodoInput from './components/todoinput.jsx'
import TodoList from './components/todolist/todolist.jsx'
export default class App extends Component {
   
  constructor(){
   
    super()
    this.state = {
   
      title:"待办事项",
      value:'',
      btnText:'ADD',
      arr:[]
    }
  }
  // 生命周期，页面重新加载数据
  componentDidMount(){
   
    this.getTodos()
  }
  getTodos(){
   
    this.$http.getTodos().then(res=>{
   
      this.setState({
   
        arr:res.data
      })
    })
  }
  render() {
   
    const