動作するフォーム

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 30/47。

通常のHTMLでは、フォームの action はPOST先のURLです。Next.jsでは、URLの代わりに関数を渡すことができます：

import { addItem } from './actions';

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

送信時に、Reactは3つの処理を行います。ブラウザの通常のページ再読み込みを伴う送信を停止し、フォームの送信名付きフィールドをFormDataオブジェクトにまとめ、それを渡してactionを呼び出します。

何が存在しないかに注目してください。onSubmit も、event.preventDefault() も、ステートもありません。そして、このページは依然としてサーバーコンポーネントです。アクションは渡されるデータであり、イベントハンドラーではないため、境界を問題なく越えることができます。

1つ注意すべき点があります。アイテムは保存されますが、画面上のリストはまだ変更されません。ページはすでにサーバー上でレンダリングされており、再読み込みを指示するものが何も無いためです。2つ後のレッスンで、これを1行で修正します。

チャレンジ

初心者

ショッピングリストにはinputとbuttonがありますが、それらをサーバーに接続するものがまだありません。actionはすでにapp/actions.js内に作成されています。

app/page.jsxで、'./actions'からaddItemをインポート（import）します。
inputとbuttonをid="add-form"が指定された<form>で囲みます。
そのフォーム（form）にaction={addItem}を設定します。

inputのname="text"はそのままにしておいてください。actionはその名前でフィールドの値を読み取ります。

自分で試してみよう

import './globals.css';

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

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