Enviar datos de formularios a una tabla en ReactJS.
Lo siento por esta pregunta de novato, pero soy bastante nuevo en ReactJS y JavaScript, mi problema es que estoy tratando de enviar los valores en mis campos de entrada en la tabla que contiene los encabezados de columna: Ejercicio, Conjunto, Repeticiones y Descripción. Y mi objetivo es que cuando presione “Agregar ejercicio al programa de entrenamiento”, los valores se almacenen en la tabla y que pueda agregar algunos valores nuevos en una nueva fila justo debajo, pero no funciona porque cuando presiono el botón de agregar, la página simplemente se actualiza y los valores no se almacenan en la tabla.
Aquí está mi código:
import React from 'react'
import './Trainerworkout.css'
import { useState } from 'react/cjs/react.development';
export default function Trainerworkout() {
const [workout, setWorkout] = useState([
{Exercise: "", Sets: "", Reps: "", Description: ""}
]
)
function handleChange(event) {
const value = event.target.value;
setWorkout({
...workout,
[event.target.name]: value
});
}
function handleSubmit(event) {
workout.push(`${workout.Exercise} ${workout.Sets} ${workout.Reps} ${workout.Description}`)
}
return (
<>
<h3>Agregar un programa de entrenamiento a un cliente</h3>
<form onsubmit="{handleSubmit}">
<label>
Ejercicio:
<input type="text" name="Exercise" value="{workout.Exercise" ||="" ''}="" onchange="{handleChange}">
</label>
<br><br><br><br>
<label>
Conjunto:
<input type="text" name="Sets" value="{workout.Sets" ||="" ''}="" onchange="{handleChange}">
</label>
<br><br><br><br>
<label>
Repeticiones:
<input type="text" name="Reps" value="{workout.Reps" ||="" ''}="" onchange="{handleChange}">
</label>
<br><br><br><br>
<label>
Descripción:
<input type="text" name="Description" value="{workout.Description" ||="" ''}="" onchange="{handleChange}">
</label>
<br><br><br><br>
<button type="submit">Agregar ejercicio al programa de entrenamiento</button>
</form>
<div classname="table">
<table classname="exerciseTable">
<thead>
<tr>
<th>Ejercicio</th>
<th>Conjunto</th>
<th>Repeticiones</th>
<th>Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td>{workout.Exercise}</td>
<td>{workout.Sets}</td>
<td>{workout.Reps}</td>
<td>{workout.Description}</td>
</tr>
</tbody>
</table>
</div>
);
}
davy.ai
El problema con la implementación actual es que la función handleSubmit no está actualizando correctamente el estado del entrenamiento con los nuevos valores ingresados en los campos de entrada antes de enviarlos al array de entrenamiento. Para solucionar este problema, podemos modificar la función handleSubmit de la siguiente manera:
Aquí, estamos evitando el comportamiento de envío de formulario predeterminado usando event.preventDefault(), y en cambio, actualizando el estado del entrenamiento con los nuevos valores ingresados en los campos de entrada usando la función setWorkout. Estamos utilizando el estado anterior del entrenamiento para agregar los nuevos valores al array de entrenamiento, y también reiniciando los campos de entrada con valores vacíos usando setWorkout({Exercise: “”, Sets: “”, Reps: “”, Description: “”}).
Para mostrar los valores en la tabla, podemos usar la función map en el array de entrenamiento para generar filas individuales para cada ejercicio:
Aquí, estamos asignando cada objeto de ejercicio en el array de entrenamiento a una fila de tabla, y usando las propiedades individuales del objeto de ejercicio para mostrar los valores en las columnas respectivas de la tabla. También estamos proporcionando una clave única a cada fila de tabla usando la propiedad de índice de la función map.
El componente Trainerworkout actualizado con estos cambios se verá así:
Con estos cambios, deberíamos poder almacenar y mostrar con éxito los valores de entrada en la tabla sin que se actualice la página.