【React】react 初学增删改查购物车案例

努力挣钱的小鑫

已于 2024-04-22 15:24:19 修改

阅读量944

点赞数 28

CC 4.0 BY-SA版权

分类专栏： React.js 文章标签： react.js javascript ecmascript

于 2024-04-10 11:33:19 首次发布

本文链接：https://blog.youkuaiyun.com/IAIPython/article/details/137590118

界面

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react-购物车案例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.24.4/babel.min.js"></script>
    <style>
      #root {
     
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      table {
     
        border-collapse: collapse;
        text-align: center;
      }

      thead {
     
        background-color: #f2f2f2;
      }

      td,
      th {
     
        padding: 10px 16px;
        border: 1px solid #aaa;
      }
      .search {
     
        margin-bottom: 10px;
      }
      .count {
     
        display: inline-block;
        width: 50px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      const data = [
        {
     
          id: