نماذج تعمل وتتفاعل

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 30 من 47.

في HTML العادي، تكون خاصية action للنموذج عبارة عن URL لإرسال طلب POST إليه. ولكن في Next.js، يمكنك تمرير دالة (function) بدلاً من ذلك:

import { addItem } from './actions';

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

عند الإرسال (submit)، يقوم React بثلاثة أشياء من أجلك: يوقف إعادة تحميل الصفحة العادية للمتصفح، ويجمع الحقول المسمات الخاصة بالنموذج في كائن FormData، ويستدعي الـ action الخاص بك باستخدامه.

لاحظ ما هو غير موجود: لا يوجد onSubmit، ولا event.preventDefault()، ولا حالة (state). وما زالت هذه الصفحة عبارة عن Server Component: الإجراء (action) هو عبارة عن بيانات يتم تمريرها، وليس معالج أحداث (event handler)، لذا فإنه يعبر الحدود بكل سهولة.

شيء واحد يجب الاستعداد له: تم حفظ الـ `item`، ولكن القائمة على الشاشة لن تتغير بعد. لقد تم تقديم الصفحة بالفعل على الـ `server`، ولا يوجد شيء أخبرها بالتحقق مرة أخرى. بعد درسين من الآن ستصلح ذلك في سطر واحد.

التحدي

مبتدئ

تحتوي قائمة التسوق على عنصر input وزر button، ولكن لا شيء يربطهما بالـ server. الـ action مكتوب بالفعل من أجلك في app/actions.js.

في app/page.jsx، قم بـ import لـ addItem من './actions'.
قم بتغليف الـ input والـ button داخل <form> بـ id="add-form".
أعطِ هذا الـ form الخاصية action={addItem}.

اترك الخاصية name="text" الخاصة بـ input كما هي: حيث يقرأ الـ action الحقل بهذا الاسم.

جرّب بنفسك

import './globals.css';

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

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