Formulários que Executam Ações

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 30 de 47.

Em HTML puro, a action de um formulário é uma URL para a qual fazer um POST. No Next.js, você pode passar uma função em vez disso:

import { addItem } from './actions';

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

No submit, o React faz três coisas para você: ele interrompe o envio com recarregamento de página normal do navegador, coleta os campos nomeados do form em um objeto FormData e chama sua action com ele.

Note o que não está lá: sem onSubmit, sem event.preventDefault(), sem estado. E esta página ainda é um Server Component: a action são dados sendo passados adiante, não um manipulador de eventos, por isso ela cruza a fronteira tranquilamente.

Algo para se preparar: o item é salvo, mas a list na tela ainda não vai mudar. A página já foi renderizada no server, e nada a instruiu a olhar novamente. Daqui a duas lições você corrigirá isso em uma linha.

Desafio

Iniciante

A lista de compras tem um input e um botão (button), mas nada os conecta ao servidor. A action já foi escrita para você em app/actions.js.

Em app/page.jsx, importe addItem de './actions'.
Envolva o input e o botão em um <form> com id="add-form".
Atribua a esse formulário action={addItem}.

Deixe o name="text" do input como está: a action lê o campo por esse nome.

Experimente você mesmo

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}