React商城购物车多层级单选,多选实现demo

父类组件

  this.state = {
      checkAll: false,
      showState: true,
      list: [
        {
          order: "日本药品馆",
          total: "3",
          money: "3223",
          checkCountry: false,
          commodity: [
            {
              img: "1",
              name: "111",
              price: "123",
              count: "1",
              check: false,
            },
          ],
        },
        {
          order: "韩国药品馆",
          total: "3",
          money: "3223",
          checkCountry: false,
          commodity: [
            {
              img: "1",
              name: "1",
              price: "123",
              count: "1",
              total: "3",
              money: "3223",
              check: false,
            },
            {
              img: "1",
              name: "22",
              price: "123",
              count: "1",
              total: "3",
              money: "3223",
              check: false,
            },
          ],
        },
      ],
    };
// 全选
  checkAll = (mes) => {
    console.log("全选",mes)
    let temp = this.state.list;
      temp.map((item) => {
        item.checkCountry = mes;
        item.commodity.map((item2) => {
            item2.check =mes;
          });
      });
    // temp.
    this.setState({ list: temp });
  };
  // 选择国家
  updateCounrty = (data) => {
    console.log("国家", data);
    const { index, checkCountry } = data;
    let temp = this.state.list;
    temp[index].checkCountry = checkCountry;
    temp[index].commodity.map((item) => {
      item.check = checkCountry;
    });
    // 
    var a = temp.every((item)=>{
      return item.checkCountry
  })
  this.state.checkAll = a;
    this.setState({ list: temp });
  };
  // 选择单个药品
  update = (data) => {
    console.log("商品", data,a);
    const { index, index2, check } = data;
    let temp = this.state.list;
    temp[index].commodity[index2].check = check;
    var a = temp[index].commodity.every((item)=>{
        return item.check
    })
    temp[index].checkCountry = a;
    var b = temp.every((item)=>{
      return item.checkCountry
  })
  this.state.checkAll = b;
    this.setState({ list: temp });
  
  };
  // 渲染
  render() {
    const { showState, list, checkAll } = this.state;
    return (
      <div className={styles.car}>
        <div className={styles.top}>
          <span className={styles.left}>购物车</span>
          {/* <span className={styles.right}>管理</span> */}
        </div>
        {!showState && (
          <div>
            <img className={styles.noImg} src={noImg} alt="" />
            <Link to="/">
              <button className={styles.goShop}>去逛逛＞＞ </button>
            </Link>
          </div>
        )}
        {showState && (
          <div>
            {/* 购物车 */}
            <CarList
              list={list}
              update={this.update}
              updateCounrty={this.updateCounrty}
            ></CarList>
            {/* 猜你喜欢 */}
            <MiddleBox></MiddleBox>
          </div>
        )}
        {/* 结算 */}
        <div className={styles.settlement}>
          <img
            onClick ={()=>{this.setState({checkAll:!checkAll});this.checkAll(!checkAll);}}
            className={styles.check}
            src={checkAll ? Check : noCheck}
            alt=""
          />
          <span className={styles.all}>全选</span>
          <div className={styles.money}>合计:HK$0</div>
          <button className={styles.go}>去结算()</button>
        </div>
        {/* 结算end */}
        <Footer current="3"></Footer>
      </div>
    );
  }
}

子类组件

import React from "react";
import styles from "./index.module.scss";
export default class CarList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkAll: false,
    };
  }

  render() {
    const { checkAll } = this.state;
    const { list ,update,updateCounrty} = this.props;
    console.log('购物车,',this.props)
    return (
      <div className={styles.CarList}>
        {list.map((item, index) => {
          return (
            <div className={styles.box} key={index}>
         

              <div className={styles.top}>
                {/* 国家馆 */}
                <img  onClick ={()=>{updateCounrty({index:index,checkCountry:!item.checkCountry})}} src={item.checkCountry ? Check : noCheck} alt="" />
                <span className={styles.name}>{item.order}</span>
              </div>
              {item.commodity.map((item2, index2) => {
                return (
                  <div className={styles.commodity} key={index2}>
                    <img
                      onClick ={()=>{update({index:index,index2:index2,check:!item2.check})}}
                      className={styles.check}
                      src={item2.check ? Check : noCheck}
                      alt=""
                    />
                    <div className={styles.content}>
                      <img className={styles.img} src={img} alt="" />
                      <div className={styles.right}>
                        <div className={styles.name}>{item2.name}</div>
                        <div className={styles.price}>HK${item2.price}</div>
                        <div className={styles.count}>x{item2.count}</div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
    );
  }
}