功能删除日志

最新推荐文章于 2024-05-31 19:09:15 发布

pqxpq

最新推荐文章于 2024-05-31 19:09:15 发布

阅读量66

点赞数

分类专栏：后端学不走之react 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/qq_52563729/article/details/127310710

版权

后端学不走之react 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

我们删除这个回调函数要传两层，在传参数的地方使用闭包

第一层：App.js

import LogItem from "./LogItem/LogItem";
import Card from '../UI/Card/Card.js'
import './Logs.css';
/*组件名应该和文件名一样 */
const Logs=(props)=>{
    //创建数据，将数据放入jsx中
    const LogItemDate= props.logsData.map((item,index)=><LogItem 
    //使用闭包
    onDelLog={()=>props.onDelLog(index)}
    key={item.id} 
    date={item.date} 
    desc={item.desc} 
    time={item.time}/>);


    return <Card className="logs">
    {
         LogItemDate
    }
    </Card>
}
//导出组件
export default Logs;

第二层：logs.js

import LogItem from "./LogItem/LogItem";
import Card from '../UI/Card/Card.js'
import './Logs.css';
/*组件名应该和文件名一样 */
const Logs=(props)=>{
    //创建数据，将数据放入jsx中
    const LogItemDate= props.logsData.map((item,index)=><LogItem 
    //使用闭包
    onDelLog={()=>props.onDelLog(index)}
    key={item.id} 
    date={item.date} 
    desc={item.desc} 
    time={item.time}/>);


    return <Card className="logs">
    {
         LogItemDate
    }
    </Card>
}
//导出组件
export default Logs;

最后一层logitem.js

import React from 'react'
import MyDate from './MyDate/MyDate'
import './LogItem.css'
import Card from '../../UI/Card/Card.js'
const LogItem = (props) => {
  const deleteItemHandler=()=>{
    //下面这个函数返回的是一个bool值
    const isDel=window.confirm("该操作不可恢复,是否确认?")
    if(isDel){
      props.onDelLog();
      //删除当前的item，删除state里面的数据
      //数据已经被我们提升到了app.js里面了
  
    }
  }

  return (
    <Card className="item">
    <MyDate date={props.date}/>
    {/**日志内容容器 */}
    <div className="content">
        <h2 className='desc'> {props.desc}</h2>
        <div className='time'> {props.time}</div>
    </div>
    
    <div>
      <div onClick={deleteItemHandler} className={'delete'}>x</div>
    </div>
    </Card>
  )
}

export default LogItem