טפסים שפועלים

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 30 מתוך 47.

ב-HTML רגיל, הערך של action בטופס הוא כתובת URL שאליה שולחים בקשת POST. ב-Next.js אפשר להעביר לו פונקציה במקום:

import { addItem } from './actions';

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

בעת השליחה, React עושה עבורך שלושה דברים: מונעת מהדפדפן לשלוח את הטופס בדרך הרגילה שמרעננת את הדף, אוספת את השדות בעלי השמות בטופס לאובייקט FormData, וקוראת לפעולה שלך עם האובייקט הזה.

שימו לב מה לא מופיע כאן: אין onSubmit, אין event.preventDefault(), ואין מצב. והדף הזה עדיין Server Component: הפעולה היא נתונים שמועברים הלאה, לא מטפל אירועים, ולכן היא חוצה את הגבול ללא בעיה.

דבר אחד שכדאי להתכונן אליו: הפריט נשמר, אבל הרשימה שעל המסך עדיין לא תשתנה. הדף כבר רונדר בשרת, ושום דבר לא אמר לו לבדוק שוב. בעוד שני שיעורים תתקן את זה בשורה אחת.

אתגר

מתחילים

ברשימת הקניות יש שדה קלט ולחצן, אבל שום דבר לא מחבר אותם לשרת. הפעולה כבר נכתבה עבורך בקובץ app/actions.js.

ב־app/page.jsx, ייבא את addItem מתוך './actions'.
עטוף את שדה הקלט ואת הלחצן ב־<form> עם id="add-form".
הגדר לטופס הזה action={addItem}.

אל תשנה את name="text" של שדה הקלט: הפעולה קוראת את השדה לפי השם הזה.

נסו בעצמכם

import './globals.css';

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

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