React实现简易购物车（全选，删除，数量加减，总价，总数量）

最新推荐文章于 2024-08-20 10:25:02 发布

一颗青柠~

最新推荐文章于 2024-08-20 10:25:02 发布

阅读量5.1k

点赞数 9

分类专栏：购物车文章标签： react

本文链接：https://blog.csdn.net/qq_44711316/article/details/109394426

版权

这篇博客介绍了如何在React中实现购物车的功能，包括商品全选、删除、数量加减、总价计算和总数量显示。作者通过App.js、ComA.js和ComB.js组件来分别处理不同的逻辑，并提供了相关的代码示例和CSS样式。虽然编辑功能尚未实现，但这是一个初学者了解React组件化开发和状态管理的好例子。

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

React实现简易购物车（全选，删除，数量加减，总价，总数量）

实现效果
组件相关目录
框起来的是使用到的
表格是放于ComA.js里处理渲染，总价和总数量放于ComB.js里处理渲染

App.js代码

import './App.css';
import ComA from "./components/ComA"
import ComB from "./components/ComB"
import React from "react"

class App extends React.Component{
   
  constructor(){
   
    super()
    this.state={
   
      booklist:[
        {
   
          id:1,
          bookName:"小红书",
          bookPrice:18,
          bookNum:1,
          checked:false
        },{
   
          id:2,
          bookName:"小兰书",
          bookPrice:15,
          bookNum:1,
          checked:false
        },{
   
          id:3,
          bookName:"小黑书",
          bookPrice:20,
          bookNum:1,
          checked:false
        },{
   
          id:4,
          bookName:"小白书",
          bookPrice:12,
          bookNum:1,
          checked:false
        }
      ],
      totalPrice:0,
      totalNum:0,
      allChecked:false
    }
  }
  //子组件ComA减数量按钮操作
  mulNum(i){
   
    let list = [...this.state.booklist]
    list[i].bookNum--;
    this.setState({
   
      booklist:list
    })
    this.getToTal()
  }
  //子组件ComA加数量按钮操作
  addNum(i){
   
    let list = [...this.state.booklist]
    list[i].book