Adicionando um formulário ao Redux

Na lição anterior, aprendemos que para campos de entrada de formulário podemos usar estados, que funcionarão apenas dentro de um componente, e criamos um formulário vazio.

Vamos colocar dentro das tags form a marcação para cada campo, onde as informações serão inseridas. A primeira entrada será responsável pelo nome do produto e sua marcação será assim:

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

O segundo será um textarea para a descrição do produto:

<p>
	<label htmlFor="productDesc">Descrição:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Escreva você mesmo o código para as duas entradas restantes para preço e quantidade com os IDs productPrice e productAmount respectivamente.

Após todos os quatro campos de entrada, antes da tag de fechamento form, adicione um botão para salvar:

<button type="button">salvar</button>

Nosso componente de formulário está pronto. Vamos exibi-lo na página principal. Para fazer isso, abra o arquivo root.jsx, importe o componente para ele:

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

E insira-o entre a tag hr e o componente ProductsList assim:

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

Vamos iniciar nosso aplicativo e admirar o formulário e a lista de produtos. Vamos adicionar alguns estilos em 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 seu aplicativo de estudantes. Faça a marcação para o seu formulário, como mostrado na lição.

Adicione o componente finalizado NewStudentForm na página principal antes de StudentsList