Tengo una tabla y un formulario. Cuando se hace clic en el botón 'Agregar' después de ingresar los detalles en el formulario, me gustaría que los datos se ingresen como una nueva fila en la tabla, sin embargo, ninguno de los métodos que probé funcionó. Estoy usando reactjs, reactstrap. Aquí está mi código:
<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>Este debería ser un buen punto de partida para usted.
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> ); }