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

Posted 2023-03-23

【中文标题】如何将已输入的表单数据添加到表格行？

【英文标题】：How do I add form data that has been input to table row?

【发布时间】：2021-11-22 10:00:05

【问题描述】：

我有一张桌子和一张表格。当在表单中输入详细信息后单击“添加”按钮时，我希望将数据作为表中的新表行输入，但是，我尝试过的方法都没有奏效。我正在使用 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>

【参考方案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>
  );

【讨论】：

谢谢你，成功了。不过，我将如何映射多个值？例如，我想显示名称而不只是数字？

因此您将定义一个接口，例如 Person，然后您的数组将改为 Array。您的表单必须以某种方式收集人员、名字、姓氏等字段，然后提交将创建一个人员并将其附加到数组中。