汇总具有onchange事件的表的值

Question

我有一个表，其中包含价格，数量和总计字段。价格来自数据库，需要由用户输入数量，输入后总计将基于价格和数量进行计算。我需要获取总计字段的小计。
这是我的父组件

const SuppliesTemplate = ({
      supplies: { suppliesTemplate, loading },
      getSuppliesTemplate
    }) => {
      //Create the state

      useEffect(() => {
        getSuppliesTemplate();

        //eslint-disable-next-line
      }, []);
    //getting subtotal
    const total = () =>{

    }



      //hiding depends on path
      const currentUrl = window.location.pathname;
      //getting data passing value from child to parent
      const [sub, setSub] = useState(0);

      const testData = val => {
        setSub(val);

        console.log("val", val);
        console.log("sub", sub);
      };



      if (loading || suppliesTemplate === null) {
        return <Preloader />;
      }

      return (
        <Fragment>
          <table>
            <thead>
              <tr>
                <th>Item Name</th>
                <th>Item Number</th>
                <th>Item Price</th>
                {currentUrl === "/system" ? null : <th>Actions</th>}
                {currentUrl === "/system" ? <th>Qty</th> : null}
                {currentUrl === "/system" ? <th>Total</th> : null}
              </tr>
            </thead>
            <tbody>
              {suppliesTemplate.map(supplies => (
                //<SuppliesTemplateItem supplies={supplies} key={supplies._id} />
                <SuppliesTemplateItem
                  sendData={testData}
                  supplies={supplies}
                  key={supplies._id}/>`enter code here`
              ))}enter code hereenter code here
            </tbody>`enter code here`
          </table>
          {currentUrl === "/system" ? (
            <div align="right">
              <h6>
                Subtotal:
                <input
                  id="total"
                  placeholder="0"
                  value={sub}
                  name="total"
                  min="0"
                  type="number"
                  className="text-center"
                  readOnly
                />
              </h6>
            </div>
          ) : null}
          {currentUrl === "/system" ? (
            <div align="right">
              <button>test</button>
            </div>
          ) : null}
        </Fragment>
      );
    };

这是我的子组件

const SuppliesTemplateItem = ({
  supplies,
  deleteSuppliesTemplate,
  setCurrent,
  getSubTotal,
  sendData
}) => {
  const onDelete = () => {
    deleteSuppliesTemplate(supplies._id);
    M.toast({ html: `Item ${supplies.item} Deleted!` });
  };
  //OnChange
  const [qty, setQty] = useState(0);
  const subTotal2 = supplies.price * qty;
  //getting total
  const getTotal = subTotal => {
    subTotal = supplies.price * qty;
    if (subTotal !== 0) {
      sendData(subTotal);
      console.log("END child", subTotal);
    }
  };
  //path
  const currentUrl = window.location.pathname;
  return (
    <tr>
      <td>{supplies.item} </td>
      <td>{supplies.itemNumber} </td>
      <td>{supplies.price} </td>
      {currentUrl === "/system" ? null : (
        <td>
          <a
            href="#edit-log-modal"
            className="waves-effect  waves-light blue btn-small modal-trigger"
            onClick={() => setCurrent(supplies)}
          >
            <i className="material-icons  ">edit</i>
          </a>
          <a
            href="#!"
            onClick={onDelete}
            className="waves-effect  waves-light blue btn-small "
          >
            <i className="material-icons  ">delete</i>
          </a>
        </td>
      )}
      {currentUrl === "/system" ? (
        <td>
          <input
            placeholder="Qty"
            name="qty"
            min="0"
            type="number"
            className="text-center"
            onChange={e => {
              setQty(e.target.value);
            }}
          />
        </td>
      ) : null}
      <td>
        {currentUrl === "/system" ? (
          <input
            id="total"
            placeholder="0"
            value={supplies.price * qty}
            name="total"
            min="0"
            type="number"
            className="text-center"
            readOnly
          />
        ) : null}

        {getTotal()}
      </td>
    </tr>
  );
};

我试图为小计创建一个新状态，但是我只得到了总计字段的1个值