react的购物车的实现1

主要写父元素的内容 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>

    );

  }

}