[前端] 简易购物车的Hook版本

这篇具有很好参考价值的文章主要介绍了[前端] 简易购物车的Hook版本。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

利用所学习的React +Hook 完成一个简易的购物车效果,案例如下所示。

https://github.com/dL-hx/react18-advance

[前端] 简易购物车的Hook版本,# S2.React TS,前端

这个效果首先准备了对应的json数据,然后再去拆分组件,最后实现逻辑的部分,代码如下:文章来源地址https://www.toymoban.com/news/detail-542735.html

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .cart {
      width: 700px;
      margin: 30px auto;
    }

    ul {
      overflow: hidden;
    }

    li {
      width: 100px;
      border: 5px gray dotted;
      border-radius: 20px;
      padding: 20px;
      float: left;
      margin: 10px;
    }

    .remove,
    .add {
      cursor: pointer;
    }

    .cartbtn {
      font-size: 14px;
      text-align: center;
      background: red;
      color: white;
      padding: 3px;
      border-radius: 5px;
      margin-top: 10px;
      cursor: pointer;
    }

    li.active {
      border-color: red;
    }

    li.active .cartbtn {
      /**样式覆盖*/
      background-color: skyblue;
    }

    .all {
      text-align: center;
      margin: 20px 0;
    }
  </style>
  <script src="../react.development.js"></script>
  <script src="../react-dom.development.js"></script>
  <script src="../babel.min.js"></script>
  <script src="../lodash.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    /**
     * 1. 获取数据
     * 2. 定义方法
     * 3. 计算总价
     * 
     * 
     * 关注点分离
     * list 更新时候就会调用更新方法,   更新价格
    */
    let app = document.querySelector('#app');
    let root = ReactDOM.createRoot(app);

    let { useState, useEffect } = React;

    let Item = (props) => {
      const {
        id,
        isActive,
        name,
        number,
        price,
        handleAdd,
        handleRemove,
        handleToCart
      } = props
      return <li className={isActive ? "active" : ""}>
        <h3>{name}</h3>
        <p>单价:{price}</p>
        <p>
          数量:
          <span className="remove" onClick={() => handleRemove(id)}>-</span>
          <span>{number}</span>
          <span className="add" onClick={() => handleAdd(id)}>+</span>
        </p>

        <div className="cartbtn" onClick={() => handleToCart(id)}>
          {
            isActive ? '取消购买' : '添加到购物车'
          }
        </div>
      </li>
    }


    let Cart = () => {
      const [list, setList] = useState([])
      const [all, setAll] = useState(0)
      useEffect(() => {//1. 获取数据
        // fetch获取本地数据
        fetch('./data.json').then((res) => {
          return res.json()
        }).then(res => {
          if (res.errcode === 0) {
            setList(res.list)
          }
        })
      }, [])

      // 更新list时候需要更新价格
      // 关注点分离
      useEffect(() => {
        computedAll()
      }, [list])


      // 2. 定义方法
      // 由id修改list数量
      const handleAdd = (id) => {
        let cloneList = _.cloneDeep(list)
        let now = cloneList.find((v) => v.id === id)
        now.number++
        setList(cloneList)
      }


      const handleRemove = (id) => {
        let cloneList = _.cloneDeep(list)
        let now = cloneList.find((v) => v.id === id)
        if (now.number >= 1) {
          now.number--
        }
        setList(cloneList)
      }


      const handleToCart = (id) => {
        // 改为是否激活(修改isActive状态)
        let cloneList = _.cloneDeep(list)
        let now = cloneList.find((v) => v.id === id)
        now.isActive = !now.isActive
        setList(cloneList)
      }


      // 计算金额,金额和 加入购物车的 ,✔ 有关
      const computedAll = () => {
        let all = 0
        // 过滤出已经勾选的选项,然后计算总价格
        list.filter((v) => v.isActive).forEach(v => {
          all += v.price * v.number
        });
        setAll(all)
      }
      return (
        <div className="cart">
          <ul>
            {
              list.map(v => {
                return <Item
                  {...v}
                  key={v.id}
                  handleAdd={handleAdd}
                  handleRemove={handleRemove}
                  handleToCart={handleToCart}
                />
              })
            }
          </ul>
          <div className="all">
            总金额:<span>{all}</span></div>
        </div>
      );
    }

    let element = (
      <Cart />
    );

    root.render(element)

  </script>
</body>

</html>

到了这里,关于[前端] 简易购物车的Hook版本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue仿京东加入购物车弹框立即购买弹框shopDialog自定义弹框内容

    前端Vue仿京东加入购物车弹框立即购买弹框shopDialog自定义弹框内容, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13183 效果图如下: 使用方法 使用注意: 该插件需引用cc-radioBtnBox插件和cc-numbox插件两个插件库 cc-radioBtnBox插件地址:https://ext.dcloud.net

    2024年02月10日
    浏览(46)
  • Android商城开发----点击加入购物车,购物车商品的增删减

    上一章节:【分类页面】点击左侧类别,实现右侧对应类别商品的展示 本文是在上一章节基础上开发的,点击【分类】页面商品的加入购物车按钮,实现将商品加入购物车的功能。 本文主要实现的功能是: 1.点击加入购物车按钮,将商品加入购物车。 2.点击相同的商品加入

    2024年02月03日
    浏览(60)
  • JavaWeb购物系统(五)购物车模块的实现

    未添加商品效果图 添加商品之后的效果图 添加商品 购物车中商品的数量增加、减少、通过键盘输入改变数量 清空购物车 计算购物车商品的总价格 我们的购物车采用的是在服务端,即:使用session来存储。这样做的 缺点 :无法永久存储,当服务端关闭的时候,会销毁。 优点

    2024年02月07日
    浏览(44)
  • JavaWeb购物系统(六)购物车订单模块的实现

    有订单时的效果图 无订单时的效果图 订单详情页 生成订单 订单页的展示 查看订单详情 和购物车同样的,首先得知道我们的订单对应的哪个实体对象。一个用户可能有多条订单记录,一个订单里边可以包含多个 商品(也可以理解为多个购物项) 。理清这个逻辑之后,我们

    2024年02月05日
    浏览(52)
  • Html购物车

    目录 一.登陆界面 二.注册界面 三.购物车界面  我的登陆界面用正则判断,昵称输入框的输入要求时3到6个大写或小写字母, placeholder时信息提示 ,它在输入框中显示,当你在输入框中输入值时,就会消失  我写了非空判断,在没有输入值就点击登陆时,就会弹出提示框(

    2024年02月08日
    浏览(47)
  • Android -- 购物车

    购物车功能描述         第一次进入购物车页面,购物车里面是空的,同时提示去逛手机商场, 如 首次进入的页面 图所示。接着去商场页面选购手机,随便挑了几部手机加入购物车,再返回购物车页面,即可看 到购物车的商品列表,如 购物车已选列表图 所示,有商品

    2023年04月08日
    浏览(33)
  • JavaWeb 购物车项目

    今天是基于我们所学的服务器存储端和三层架构来完善该项目,今天先完善一部分的功能。   1.登录 先创建一个用户表,表中有id,name,pwd三个属性首。 需要具备一个登录页面,一个处理登录数据的页面,在该页面进行判断,当该用户存在,我们跳转到商城,用户不存在回到登

    2024年02月07日
    浏览(42)
  • JavaWeb购物车项目

    目录 项目前提 数据库的创建 用户表 商品表 eclipse进行创建包和类: 主要实现功能 1、购物车用户登录 2、商品显示 3、购物车添加商品总数和价格的计算 1、购物车并不是一直放数据库 2、选择使用的技术: session:(购物车项目使用session) 好处:快(放在内存当中),存对象的

    2024年02月05日
    浏览(46)
  • 购物车按钮

    先看效果: 再看代码:

    2024年02月08日
    浏览(34)
  • Vue项目(购物车)

    目录 购物车效果展示: 购物车代码: 购物车效果展示: 此项目添加、修改、删除数据的地方都写了浏览器都会把它存储起来 下次运行项目时会把浏览器数据拿出来并在页面展示 Video_20230816145047 购物车代码: 复制完代码,需改下script中引入的vue文件地址; 可直接使用

    2024年02月12日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包