将用户输入从子功能组件传递到父功能组件

Question

我创建了一个发票生成器，用户可以在其中添加一个项目，它的价格和数量。我希望将用户输入作为状态从子功能组件(TableItems.js)访问到父函数组件(TableSheet.js)，以便能够将用户输入保存到数据库中，最好是防火墙。我在访问从子组件到父组件的用户输入值时遇到了问题。我已经和这个虫子斗争了好几天了，我真的希望你们能帮我。

这是子组件

import React, {useState, useEffect} from 'react'

function TableItems({index, tableItem }) {
    const [price, setPrice] = useState(0);
    const [qty, setQty] = useState(0);
    const [total, setTotal] = useState([]);

useEffect(() => {
    //arithmetically add price and qty values
    const x = Number(price) * Number(qty)
    setTotal(x)
  return () => {
      //clean up function will be here
  };
  }, [price, qty, total ]);

return (
    <>
        <tr>
           <td><input type='text' required/></td>
            <td><input type='number' value={price} onChange={(e) => setPrice(e.target.value)}/></td>
            <td><input type='number' value={qty} onChange={(e) => setQty(e.target.value)}/></td>
            <td>{total}</td>
        </tr>
    </>
)
}

export default TableItems

这是父组件

 import React, { useState } from 'react'
 import TableItems from './TableItems'

 function TableSheet() {
   const [tableItem, setTableItem] = useState([1]);

  //adding a new table cell (table row)
   const addCell = () => {
      setTableItem((t) => [...t, t + 1])
   }

 return (
  <div>
  <table>
      <thead>
        <th>Item Description</th>
        <th>Price</th>
        <th>Qty.</th>
        <th>Total</th>
      </thead>
        {
          tableItem.map((tableItem, index, setItem) => {
            return <TableItems key={index} tableItem={tableItem} setItem={setItem} addCell={addCell}/>
          })
        }
    </table>
    <button onClick={addCell}>+</button>
</div>
)
}


export default TableSheet

Answer 1

您的tableItem状态应该包含项目对象(数量和价格)

TableItems

function TableItems({ index, tableItem, onChangeItem }) {
  return (
    <>
      <tr>
        <td>
          <input type="text" required />
        </td>
        <td>
          <input
            type="number"
            value={tableItem.price}
            onChange={(e) => onChangeItem(index, "price", e.target.value)}
          />
        </td>
        <td>
          <input
            type="number"
            value={tableItem.quantity}
            onChange={(e) => onChangeItem(index, "quantity", e.target.value)}
          />
        </td>
        <td>{Number(tableItem.price) * Number(tableItem.quantity)}</td>
      </tr>
    </>
  );
}

TableSheet

function TableSheet() {
  const [tableItem, setTableItem] = useState([
    {
      price: 0,
      quantity: 0
    }
  ]);

  const onChangeItem = (index, type, value) => {
    const newTable = tableItem.map((item, idx) => {
      if (idx === index)
        return {
          ...item,
          [type]: value
        };
      return item;
    });
    setTableItem(newTable);
  };

  const addCell = () => {
    setTableItem((t) => [
      ...t,
      {
        price: 0,
        quantity: 0
      }
    ]);
  };

  const totalPrice = tableItem.reduce((acc, cur) => {
    acc += Number(cur.price) * Number(cur.quantity);
    return acc;
  }, 0);

  return (
    <div>
      <table>
        <thead>
          <th>Item Description</th>
          <th>Price</th>
          <th>Qty.</th>
          <th>Total</th>
        </thead>
        {tableItem.map((tableItem, index) => {
          return (
            <TableItems
              key={index}
              index={index}
              tableItem={tableItem}
              onChangeItem={onChangeItem}
            />
          );
        })}
      </table>
      <button onClick={addCell}>+</button>
      <div>Total: {totalPrice}</div>
    </div>
  );
}

你可以登记我的码箱。希望能帮上忙！