React--简易购物车

import React, { Component, Fragment } from "react";

export default class Cart extends Component {
  constructor() {
    super();
    this.state = {
      obj: [
        { name: "红烧茄子", price: 12, num: 0, bool: false },
        { name: "鱼香肉丝", price: 12, num: 0, bool: false },
        { name: "宫保鸡丁", price: 12, num: 0, bool: false },
        { name: "佛跳墙", price: 12, num: 0, bool: false },
        { name: "叉烧饭", price: 12, num: 0, bool: false },
        { name: "椒盐蘑菇", price: 12, num: 0, bool: false },
      ],
      total: 0,
    };
  }
  //渲染页面
  showList = () => {
    return this.state.obj.map((v, i) => (
      <tr key={i}>
        <td>
          <input
            type="checkbox"
            className="check"
            onChange={this.checkOneCart.bind(this, i)}
          />
        </td>
        <td>{v.name}</td>
        <td>{v.price}</td>
        <td>
          <button onClick={this.reduce.bind(this, i)}>-</button>
          <span>{v.num}</span>
          <button onClick={this.add.bind(this, i)}>+</button>
        </td>
        <td>{v.price * v.num}</td>
        <td>
          <button onClick={this.del.bind(this, i)}>删除</button>
        </td>
      </tr>
    ));
  };
  //单选框功能，全部选中之后全选按钮自动亮起
  checkOneCart = (i) => {
    let newarr = this.state.obj;
    newarr[i].bool = !newarr[i].bool;

    var checkall = document.getElementById("allcheck");
    //查找newarr里面是否有bool===false的，如果有，返回true，再将非true的状态赋值给全选框的选中状态
    checkall.checked = !newarr.some((v) => {
      return v.bool === false;
    });
    this.setState(
      {
        obj: newarr,
      },
      () => {
        this.total();
      }
    );
  };
  //全选框功能
  checkAllCart = () => {
    var checkall = document.getElementById("allcheck");
    let newarr = this.state.obj;
    newarr.forEach((v) => {
      v.bool = checkall.checked;
    });
    this.setState(
      {
        obj: newarr,
      },
      () => {
        var check = document.getElementsByClassName("check");
        this.state.obj.forEach((v, i) => {
          check[i].checked = this.state.obj[i].bool;
        });
        this.total();
      }
    );
  };
  //添加商品数量
  add = (i) => {
    let newarr = this.state.obj;
    newarr[i].num++;
    this.setState(
      {
        obj: newarr,
      },
      () => {
        this.total();
      }
    );
  };
  //减少商品数量
  reduce = (i) => {
    let newarr = this.state.obj;
    if (newarr[i].num > 0) {
      newarr[i].num--;
      this.setState(
        {
          obj: newarr,
        },
        () => {
          this.total();
        }
      );
    }
  };
  //删除商品
  del(i) {
    let newarr = this.state.obj;
    newarr.splice(i, 1);
    this.setState(
      {
        obj: newarr,
      },
      () => {
        var check = document.getElementsByClassName("check");
        this.state.obj.forEach((v, i) => {
          check[i].checked = this.state.obj[i].bool;
        });
        this.total();
      }
    );
  }
  //计算总金额
  total() {
    var check = document.getElementsByClassName("check");
    let sum = 0;
    for (let i = 0; i < check.length; i++) {
      if (check[i].checked) {
        sum +=
          check[i].parentNode.nextElementSibling.nextElementSibling
            .nextElementSibling.nextElementSibling.innerHTML / 1;
      }
    }
    this.setState({
      total: sum,
    });
  }
  render() {
    return (
      <Fragment>
        <table border="1">
          <thead>
            <tr>
              <td>
                <input
                  type="checkbox"
                  id="allcheck"
                  onChange={this.checkAllCart}
                />
              </td>
              <td>商品名称</td>
              <td>单价</td>
              <td>数量</td>
              <td>小计</td>
              <td>删除</td>
            </tr>
          </thead>
          <tbody>
            {/* 如果没有商品，显示暂无菜品，如果有，正常显示列表 */}
            {this.state.obj.length === 0 ? (
              <tr>
                <td colSpan="6">暂无菜品</td>
              </tr>
            ) : (
              <>{this.showList()}</>
            )}
          </tbody>
          <tfoot>
            <tr>
              <td colSpan="6">总计：{this.state.total}</td>
            </tr>
          </tfoot>
        </table>
      </Fragment>
    );
  }
}