购物车(简略)函数组件版

import React, { useState, useEffect } from "react";
import "./app.scss";
const App = () => {
  const [data, setData] = useState([
    {
      gname: "云南白药",
      address: "云南",
      num: 3,
      regDate: "1371120093221",
      price: 36,
      state: "发货",
      bool: false,
    },
    {
      gname: "999感冒灵",
      address: "北京",
      num: 2,
      regDate: "1371399948599",
      price: 22,
      state: "发货",
      bool: false,
    },
    {
      gname: "感康",
      address: "河北",
      num: 5,
      regDate: "1371394846499",
      price: 18,
      state: "已发货",
      bool: false,
    },
    {
      gname: "板蓝根",
      address: "河南",
      num: 30,
      regDate: "1371394846499",
      price: 19,
      state: "已发货",
      bool: false,
    },
    {
      gname: "创可贴",
      address: "吉林",
      num: 80,
      regDate: "1371394846499",
      price: 7,
      state: "已发货",
      bool: false,
    },
  ]);
  const [$, set$] = useState(0);
  // const qx = true;
  // 添加商品
  const [shop, setShop] = useState({
    gname: undefined,
    address: undefined,
    num: undefined,
    regDate: undefined,
    price: undefined,
    state: "发货",
    bool: false,
  });
  //添加
  const add = (index) => {
    const _data = [...data];
    _data[index].num = ++data[index].num;
    setData(_data);
    let c = null;
    const _$ = data.reduce((a, b) => {
      c += b.num * b.price;
      return c;
    });
    set$(_$);
  };
  //减少
  const reduce = (index) => {
    const _data = [...data];
    if (data[index].num === 0) {
      _data.splice(index, 1);
      //等于0的时候删除
      setData(_data);
      console.log(_data);
    } else {
      _data[index].num = --data[index].num;
      setData(_data);
    }
    let c = null;
    const _$ = _data.reduce((a, b) => {
      c += b.num * b.price;
      return c;
    });
    set$(_$);
  };
  //全选
  const quanx = () => {
    const _data = [...data];
    _data.map((item) => {
      item.bool = true;
      return item;
    });
    setData(_data);
  };
  //反选
  const reserve = () => {
    const _data = [...data];
    _data.map((item) => {
      item.bool = !item.bool;
      return item;
    });
    setData(_data);
  };
  //全不选
  const quanbx = () => {
    const _data = [...data];
    _data.map((item) => {
      item.bool = false;
      return item;
    });
    setData(_data);
  };
  //点击inpot取反
  const Input = (index) => {
    const _data = [...data];
    _data[index].bool = !_data[index].bool;
    setData(_data);
  };
  //批量删除
  //清除购物车
  const kong = () => {
    const _data = [...data];
    _data.map((item) => {
      item.num = 0;
      return item;
    });
    setData(_data);
  };
  // 添加
  //获取数据
  const getData = ({ target }) => {
    const _name = target.name;
    const _shop = { ...shop };
    _shop[_name] = target.value;
    // console.log(_shop)
    setShop(_shop);
  };
  //添加物品架
  const sj = () => {
    const _data = [...data];
    _data.push(shop);
    setData(_data);
  };
  // 倒叙
  const reserve2 = () => {
    const _data = [...data];
    setData(_data.reverse());
  };
  //总价:
  useEffect(() => {
    const _data = [...data];
    let c = null;
    const _$ = _data.reduce((a, b) => {
      c += b.num * b.price;
      return c;
    });
    set$(_$);
  }, []);
  return (
    <div className="box">
      <div className="top">
        <button onClick={quanx}>全选</button>
        <button onClick={reserve}>反选</button>
        <button onClick={quanbx}>全不选</button>
        <button>批量删除</button>
        <button onClick={kong}>清空购物车</button>
        <button onClick={sj}>添加</button>
        <button onClick={reserve2}>倒叙</button>
        <input type="text" placeholder="输入内容" />
      </div>
      <table border="1">
        <thead>
          <tr>
            <th>选择</th>
            <th>名称</th>
            <th>产地</th>
            <th>数量</th>
            <th>生产日期</th>
            <th>单价</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => {
            return (
              <tr key={index}>
                <th>
                  <input
                    type="checkbox"
                    checked={item.bool}
                    onChange={() => Input(index)}
                  />
                </th>
                <th> {item.gname} </th>
                <th> {item.address} </th>
                <th>
                  <button onClick={() => reduce(index)}>-</button>
                  {item.num}
                  <button onClick={() => add(index)}>+</button>
                </th>
                <th>{item.regDate}</th>
                <th>{item.price}</th>
                <th>{item.num * item.price}</th>
                <th>
                  <button>删除</button>
                  <button>修改</button>
                </th>
              </tr>
            );
          })}
        </tbody>
        <tfoot>
          <th>
            总价:
            {$}
          </th>
        </tfoot>
      </table>
      {/* 添加商品 */}
      <div>
        <h2>添加商品:</h2>
        <table>
          <tr>
            <th>
              <input
                type="text"
                placeholder="名称"
                value={shop.gname}
                name="gname"
                onChange={getData}
              />
            </th>
            <th>
              <input
                type="text"
                placeholder="产地"
                value={shop.address}
                name="address"
                onChange={getData}
              />
            </th>
            <th>
              <input
                type="text"
                placeholder="数量"
                value={shop.num}
                name="num"
                onChange={getData}
              />
            </th>
            <th>
              <input
                type="text"
                placeholder="生产日期"
                value={shop.regDate}
                name="regDate"
                onChange={getData}
              />
            </th>
            <th>
              <input
                type="text"
                placeholder="单价"
                value={shop.price}
                name="price"
                onChange={getData}
              />
            </th>
          </tr>
        </table>
      </div>
    </div>
  );
};
export default App;