Añadir un formulario a Redux

En la lección anterior aprendimos que para los campos de un formulario se pueden aplicar estados que funcionarán solo dentro de un componente, y creamos un formulario vacío.

Dentro de las etiquetas form coloquemos el maquetado para cada campo, donde se introducirá la información. El primer input será para el nombre del producto y su maquetado será así:

<form>
	<p>
		<label htmlFor="productName">Nombre:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

El segundo será un textarea para la descripción del producto:

<p>
	<label htmlFor="productDesc">Descripción:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Escriba usted mismo el código para los dos inputs restantes para el precio y la cantidad con los id productPrice y productAmount respectivamente.

Después de los cuatro campos de entrada, antes de la etiqueta de cierre form añada un botón para guardar:

<button type="button">guardar</button>

Nuestro componente con el formulario está listo. Mostrémoslo en la página principal. Para ello abramos el archivo root.jsx, importemos en él el componente:

import { NewProductForm } from '../parts/products/NewProductForm'

E insértelo entre la etiqueta hr y el componente ProductsList así:

<hr></hr>
<NewProductForm />
<ProductsList />

Ejecutemos nuestra aplicación y admiremos el formulario y la lista de productos. Añadamos algunos estilos más en index.css:

#main-page {
	max-width: 600px;
}

select,
textarea,
input,
button {
	font-size: 18px;
}

form {
	margin-bottom: 20px;
	border-bottom: 2px solid lightgray;
	padding-bottom: 10px;
}

form p {
	margin: 5px;
}

Abra su aplicación de estudiantes. Realice el maquetado para su formulario, como se muestra en la lección.

Añada el componente terminado NewStudentForm a la página principal antes de StudentsList