如何一次添加更多行数？

Question

我正在尝试构建一个类似 table 的结构，我想在其中动态添加行。这是我的代码：

import { React, useState } from 'react';

function Table() {
    const [add, setAdd] = useState(false);
    return (
        <div>
            <div className="headings">
                <p>Item Description</p>
                <p>Quantity</p>
                <p>Rate</p>
                <p>Amount</p>
            </div>
            <div className="rows">
                <input placeholder="Item Description" type="text" />
                <input placeholder="Quantity" type="number" />
                <input placeholder="Price per piece" type="number" />
                <input placeholder="Amount" type="number" />
            </div>
            {
                add ?
                    <div className="rows"  >
                        <input placeholder="Item Description" type="text" />
                        <input placeholder="Quantity" type="number" />
                        <input placeholder="Price per piece" type="number" />
                        <input placeholder="Amount" type="number" />
                    </div>
                    :
                    <div></div>
            }
            <button className="add" onClick={()=>setAdd(true)}>Add another line item</button>
        </div>
    )
}

export default Table;

我尝试使用按钮添加行，但我只能添加一行。状态更改为 true 那么我可以重置状态还是应该使用任何其他方法来添加行？

Answer 1

您需要设置一个计数器来跟踪您有多少行，最好将其传递给另一个组件。
这不是一个完整的例子，也不是很漂亮，但精髓在那里：

import { React, useState } from "react";

function Rows({ numberOfRows }) {
  return [...Array(numberOfRows)].map((element, index) => (
    <div key={index}>{`Row Number ${index}`}</div>
  ));
}

function Table() {
  const [numberOfRows, setNumberOfRows] = useState(0);

  const addRow = () => {
    setNumberOfRows((prev) => prev + 1);
  };

  const deleteRow = () => {
    if (numberOfRows > 0) {
      setNumberOfRows((prev) => prev - 1);
    }
  };

  return (
    <div>
      <div className="headings">
        <p>Item Description</p>
        <p>Quantity</p>
        <p>Rate</p>
        <p>Amount</p>
      </div>
      <Rows numberOfRows={numberOfRows} />
      <button className="add" onClick={addRow}>
        Add row
      </button>
      <button className="delete" onClick={deleteRow}>
        Delete row
      </button>
    </div>
  );
}

export default Table;

Answer 2

您可以保持线路状态：

import { React, useState } from 'react';

function Table() {
    
  const [addedLines, setAddedLines] = useState([<div key={1} className="rows">
      <input placeholder="Item Description" type="text" />
      <input placeholder="Quantity" type="number" />
      <input placeholder="Price per piece" type="number" />
      <input placeholder="Amount" type="number" />
    </div>]);
    const addLine = () => {
        const newLine = (<div key={ addedLines.length + 1 } className="rows"  >
        <input placeholder="Item Description" type="text" />
        <input placeholder="Quantity" type="number" />
        <input placeholder="Price per piece" type="number" />
        <input placeholder="Amount" type="number" />
    </div>)
    let a = []
    addedLines.forEach((x)=>a.push(x))
    a.push(newLine)
    setAddedLines(a)
    }
  return (
      <div>
          <div className="headings">
              <p>Item Description</p>
              <p>Quantity</p>
              <p>Rate</p>
              <p>Amount</p>
          </div>
          { addedLines}
          <button className="add" onClick={addLine}>Add another line item</button>
      </div>
  )
}
export default Table;

代码笔：https://codepen.io/guilhermebl/pen/vYxvBWE

如何一次添加更多行数？

How do I add more number of rows at a time?

reactjs

use-state