码迷,mamicode.com
首页 > 其他好文 > 详细

react的购物车的实现1

时间:2021-06-23 16:29:42      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:lazy   end   let   numa   ons   module   display   lag   isp   

技术图片主要写父元素的内容 shoppingcar.js

// @ts-nocheck
import React, { Component } from "react";
import shoppingcar from "../css/shoppingcar.module.css";
import Header from "../component/Menu6/header";
import List from "../component/Menu6/list";
import Footer from "../component/Menu6/footer";

export default class Menu6 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ischeckedall: false,
      num: 0,
      price: 0,
      list: [
        {
          id: 1,
          goodsname: "商品名称一",
          goodsnum: 100,
          goodsprice: 100,
          ischecked: false,
        },
        {
          id: 2,
          goodsname: "商品名称二",
          goodsnum: 1,
          goodsprice: 200,
          ischecked: false,
        },
        {
          id: 3,
          goodsname: "商品名称三",
          goodsnum: 2,
          goodsprice: 300,
          ischecked: false,
        },
      ],
    };
  }
  calc = (item, num) => {
    this.setState(
      {
        list: this.state.list.map((info) => {
          if (info.id == item.id) {
            info.goodsnum = info.goodsnum + num * 1;
          }
          return info;
        }),
      },
      () => {
        this.getNumAndPrice();
      }
    );
  };
  del = (id) => {
    this.setState(
      {
        list: this.state.list.filter((item) => item.id != id),
      },
      () => {
        this.getNumAndPrice();
      }
    );
  };
  setCheckAll = (item, flag) => {
    this.setState(
      {
        list: this.state.list.map((info) => {
          if (info.id == item.id) {
            info.ischecked = flag;
          }
          return info;
        }),
      },
      () => {
        this.setState(
          {
            ischeckedall: this.state.list.every((item) => item.ischecked),
          },
          () => {
            this.getNumAndPrice();
          }
        );
      }
    );
  };
  delAll = () => {
    this.setState(
      {
        list: this.state.list.filter((item) => !item.ischecked),
      },
      () => {
        this.getNumAndPrice();
      }
    );
  };
  getNumAndPrice = () => {
    let num = 0;
    let price = 0;
    let selectedList = this.state.list.filter((item) => item.ischecked);
    if (selectedList.length) {
      num = selectedList.map((item) => item.goodsnum).reduce((a, b) => a + b);
      price = selectedList
        .map((item) => item.goodsnum * item.goodsprice)
        .reduce((a, b) => a + b);
    }

    this.setState({
      num,
      price,
    });
  };
  changeCheckedAll = (flag) => {
    this.setState(
      {
        ischeckedall: flag,
        list: this.state.list.map((item) => {
          item.ischecked = flag;
          return item;
        }),
      },
      () => {
        this.getNumAndPrice();
      }
    );
  };

  render() {
    return (
      <div className={shoppingcar.table}>
        <Header
          changeCheckedAll={this.changeCheckedAll}
          ischeckedall={this.state.ischeckedall}
        >
          {" "}
        </Header>{" "}
        <List
          list={this.state.list}
          del={this.del}
          calc={this.calc}
          setCheckAll={this.setCheckAll}
        >
          {" "}
        </List>{" "}
        <Footer
          num={this.state.num}
          price={this.state.price}
          delAll={this.delAll}
        >
          {" "}
        </Footer>{" "}
      </div>
    );
  }
}

react的购物车的实现1

标签:lazy   end   let   numa   ons   module   display   lag   isp   

原文地址:https://www.cnblogs.com/czb1218/p/14920238.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!