react实现一个简易电商购物车代码-html代码-BFW代码库

代码语言：html

所属分类：电商

代码描述：react实现一个简易电商购物车代码，包含数量更改、删除、清空购物车等操作。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">
  
  
<style>

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap");

body {
    background-color: #e0e3e8;
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #727E8C;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #475F7B;
}

a, a:hover, a:focus {
    text-decoration: none;
    transition: 0.5s;
    outline: none;
}

/* ------------ */

.card {
    box-shadow: 0px 4px 8px rgb(0 0 0 / 16%);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 30px;
    background-color: #fff;
    border: none;
}
.card-body {
    padding: 30px;
}
.btn-primary {
    border-color: #5a8dee !important;
    background-color: #5a8dee !important;
    color: #fff;
}
.btn-danger {
    border-color: #FF2829!important;
    background-color: #FF5B5C!important;
    color: #FFF;
}
.form-submit{
  padding: 13px 30px;
  font-size: 15px;
  letter-spacing: 0.3px;
  font-weight: 400;
}
.card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.prdct-qty-container {
    display: flex;
    align-items: center;
}

.qty-input-box {
    max-width: 70px;
    padding: 0px 5px;
    min-height: 40px;
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    margin: 0px 5px;
    color: #475F7B;
    background-color: #FFF;
    border: 1px solid #DFE3E7;
    transition: 0.3s;
}

.qty-input-box:focus {
    color: #475F7B;
    background-color: #FFF;
    border-color: #5A8DEE;
    outline: 0;
    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 10%);
}

.prdct-qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 4px;
    background-color: #5a8dee2e;
    color: #5a8dee;
    font-size: 11px;
    transition: 0.3s;
}

.prdct-qty-btn:hover {
    background-color: #5a8dee;
    color: #fff;
}

.product-img img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}
.card-header-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.prdct-delete {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 4px;
    background-color: #fde6e7;
    color: #ff5b5c;
    font-size: 15px;
    transition: 0.3s;
}

.prdct-delete:hover {
    background-color: #ff5b5c;
    color: #fff;
}

.cart-empty {
    text-align: center;
    padding: 30px;
}

.cart-empty i {
    font-size: 45px;
    color: #d5d6d8;
    margin-bottom: 10px;
    display: inline-block;
}

.cart-empty p {
    margin-bottom: 0;
    color: #bdbdbd;
    font-size: 16px;
}

.cart-table td, .cart-table th {
    vertical-align: middle;
}
</style>




</head>

<body>
  <div id="root">
  
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
      <script type="text/babel">
      
const {react, useState} = window.React;
  const { render,reactdom  } = window.ReactDOM;



const App = () => {
    const productData = [
        {
            "id": 1,
            "image": "//repo.bfw.wiki/bfwrepo/image/5ff8f9c4688b7.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90",
            "name": "Coke - Diet, 355 Ml",
            "price": 120,
            "qty": 1,
        },
        {
            "id": 2,
            "image": "//repo.bfw.wiki/bfwrepo/image/5ff8f9d574eb5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90",
            "name": "Pork - Hock And Feet Attached",
            "price": 150,
            "qty": 1,
        },
        {
            "id": 3,
            "image": "//repo.bfw.wiki/bfwrepo/image/5ff8f9e5b4e43.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90",
            "name": "Veal - Jambu",
            "price": 135,
            "qty": 1,
        },
        {
            "id": 4,
            "image": "//repo.bfw.wiki/bfwrepo/image/5ff8f9e5b4e43.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90",
            "name": "Almonds Ground Blanched",
            "price": 110,
            "qty": 1,
        },
        {
            "id": 5,
            "image": "//repo.bfw.wiki/bfwrepo/image/5ff8f9e5b4e43.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90",
            "name": "Passion Fruit",
            "price": 80,
            "qty": 1,
        }
    ]

    const [products, SetProducts] = useState(productData);

    // -----Increment Event------
    const increaseQuantity = (i) => {
        SetProducts((preValue) =>
            preValue.map((data, o) => {
                if (i === o) {
                    return {
                        ...data,
                        qty: data.qty + 1
                    };
                }
                return data;
            })
        );
    };

    // -----Decrement Event------
    const decreaseQuantity = (i) => {
        SetProducts((preValue) =>
            preValue.map((data, o) => {
                if (i === o) {
                    if (data.qty > 1) {
                        return { ...data, qty: data.qty - 1 };
                    } else {
                        return data;
                    }
                }
                return data;
            })
        );
    };



    // -----Remove Event------
    const removeFromCart = (i) => {
        if (window.confirm("Are you sure you want to remove into your cart?")) {
            SetProducts(prevCart =>
                prevCart.filter((item, o) => {
                    return i !== o;
                })
            );
           
        } else {
            // alert('No');
        }
    };


    // -empty-cart--------
    const emptycart = () => {
        if (window.confirm("Remove all items into your cart?")) {
            SetProducts([]);
        } else {
            // alert('No');
        }
    }

    // ------Total Product Incart and Total Price of cart
    const cartTot.........完整代码请登录后点击上方下载按钮下载查看