如何将已输入的表单数据添加到表格行？

Question

我有一张桌子和一张表格。当在表单中输入详细信息后单击“添加”按钮时，我希望将数据作为表中的新表行输入，但是，我尝试过的方法都没有奏效。我正在使用 reactjs，reactstrap。 这是我的代码：

               <Row form>
                  <Col md={6}>
                    <FormGroup>
                      <Label for="proName">Product Name</Label>
                      <Input type="proName" name="proName" id="proName" placeholder="Product Name" />
                    </FormGroup>
                  </Col>
                  <Col md={6}>
                    <FormGroup>
                      <Label for="storeName">Store Name</Label>
                      <Input type="storeName" name="storeName" id="storeName" placeholder="Store Name" />
                    </FormGroup>
                  </Col>
                   <Col md={6}>
                    <FormGroup>
                      <Label for="pPrice">Price</Label>
                      <Input type="pPrice" name="pPrice" id="pPrice" placeholder="Price" />
                    </FormGroup>
                  </Col>
                </Row>

                 .......
                 <CardBody>
                  <Table className="tablesorter" responsive>
                    <thead className="text-primary">
                      <tr>
                        <th>Store</th>
                        <th>Product</th>
                        <th>Price</th>
                      </tr>
                    </thead>
                    <tbody id="tbid">
                      <tr>
                        <td>
                          {/*Here is where the new rows should be input*/}
                        </td>
                      </tr>
                    </tbody>                 
                  </Table>
                </CardBody>

Answer 1

这对你来说应该是一个很好的起点。

https://codesandbox.io/s/modest-gates-o80t7?file=/src/styles.css

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [nums, setNums] = useState<Array<number>>([]);
  const [formNumber, setFormNumber] = useState<number | undefined>(undefined);

  function addNum(n: number) {
    setNums((currentNums) => [...currentNums, n]);
  }

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    e.stopPropagation();

    if (formNumber !== undefined && !isNaN(formNumber)) {
      addNum(formNumber);
    }
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input
          type="number"
          placeholder="number"
          onChange={(e) => setFormNumber(parseFloat(e.target.value))}
        ></input>
        <button type="submit">Submit</button>
      </form>

      <table>
        <thead>
          <tr>
            <td>Index</td>
            <td>Number</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            {nums.map((n, idx) => (
              <tr>
                <td>{idx}</td>
                <td>{n}</td>
              </tr>
            ))}
          </tr>
        </tbody>
      </table>
    </div>
  );
}