טפסים ב-React: שדות קלט, checkbox, select וולידציה

טופס React מחזיק את הערך של כל שדה ב-state: השדה מציג value={state} ומעדכן אותו עם onChange. כשהמשתמש שולח, handler של onSubmit קורא ל-e.preventDefault() כדי לעצור את רענון הדף, ואז משתמש בערכים שכבר נמצאים ב-state.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');
    const [greeting, setGreeting] = useState('');

    function handleSubmit(e) {
        e.preventDefault();
        setGreeting(`Hello, ${name || 'stranger'}!`);
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name{' '}
                <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
            </label>{' '}
            <button type="submit">Say hello</button>
            <p>{greeting}</p>
        </form>
    );
}

הקלידו שם ולחצו Enter או על הכפתור. אחר כך מחקו את השורה e.preventDefault();: התצוגה המקדימה מציגה את השדות שהדפדפן היה שולח בשליחה נייטיב, שבדף אמיתי גם הייתה מרעננת אותו.

שדה שהערך שלו מגיע מ-state נקרא שדה מבוקר (controlled input). החלופה, לתת ל-DOM להחזיק את הערך ולקרוא אותו אחר כך, מכוסה ב-קומפוננטות מבוקרות מול לא מבוקרות.

שדות טקסט ו-textarea

כל שדה טקסט עובד אותו דבר: value מ-state, ו-onChange קורא את e.target.value. <textarea> עוקב אחרי אותו דפוס. ב-HTML הטקסט שלו נכתב בין התגיות, אבל ב-React מעבירים אותו כ-value.

import { useState } from 'react';

export default function App() {
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 320 }}>
            <input
                value={title}
                onChange={(e) => setTitle(e.target.value.toUpperCase())}
                placeholder="Title (shouts)"
            />
            <textarea
                value={body}
                onChange={(e) => setBody(e.target.value)}
                rows={4}
                maxLength={140}
                placeholder="Up to 140 characters"
            />
            <small>{140 - body.length} characters left</small>
        </div>
    );
}

מכיוון שאתם קובעים את הערך בעצמכם, אפשר לשנות את מה שהמשתמש הקליד לפני שהוא מוצג: שדה הכותרת הופך כל אות לאות גדולה. מונה התווים מתעדכן בכל הקשה כי body הוא state וכל שינוי מרנדר שוב.

select

<select> מקבל value על אלמנט ה-select עצמו, לא selected על option. e.target.value הוא ה-value של האפשרות שנבחרה.

import { useState } from 'react';

export default function App() {
    const [plan, setPlan] = useState('monthly');
    const prices = { monthly: '$12 a month', yearly: '$99 a year', free: '$0' };

    return (
        <div>
            <select value={plan} onChange={(e) => setPlan(e.target.value)}>
                <option value="free">Free</option>
                <option value="monthly">Monthly</option>
                <option value="yearly">Yearly</option>
            </select>
            <p>You pay {prices[plan]}.</p>
        </div>
    );
}

ל-select עם בחירה מרובה, הוסיפו multiple והעבירו מערך בתור value. קראו את הבחירות עם Array.from(e.target.selectedOptions, (o) => o.value).

checkbox וכפתורי רדיו

checkbox נשלט עם checked, לא value, וה-handler שלו קורא את e.target.checked, שהוא true או false. כפתורי רדיו בקבוצה חולקים name; כל אחד מסומן כשה-state שווה לערך שלו.

import { useState } from 'react';

export default function App() {
    const [newsletter, setNewsletter] = useState(false);
    const [size, setSize] = useState('m');

    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    checked={newsletter}
                    onChange={(e) => setNewsletter(e.target.checked)}
                />
                Send me the newsletter
            </label>

            <p>Shirt size:</p>
            {['s', 'm', 'l'].map((s) => (
                <label key={s} style={{ marginInlineEnd: 12 }}>
                    <input
                        type="radio"
                        name="size"
                        value={s}
                        checked={size === s}
                        onChange={(e) => setSize(e.target.value)}
                    />
                    {s.toUpperCase()}
                </label>
            ))}

            <p>
                Size {size.toUpperCase()}, newsletter {newsletter ? 'on' : 'off'}.
            </p>
        </div>
    );
}

קריאה של e.target.value ב-checkbox היא טעות נפוצה: ב-checkbox בלי מאפיין value היא מחזירה את המחרוזת "on" בין אם התיבה מסומנת ובין אם לא.

אובייקט state אחד לשדות רבים

טופס עם עשרה שדות לא צריך עשר קריאות useState ועשרה handlers. החזיקו אובייקט אחד, תנו לכל שדה name שתואם למפתח, וכתבו handler אחד שמשתמש בשם כמפתח מחושב: [e.target.name].

import { useState } from 'react';

export default function App() {
    const [form, setForm] = useState({
        email: '',
        country: 'NO',
        terms: false,
    });

    function handleChange(e) {
        const { name, type, value, checked } = e.target;
        setForm({ ...form, [name]: type === 'checkbox' ? checked : value });
    }

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 280 }}>
            <input name="email" value={form.email} onChange={handleChange} placeholder="Email" />
            <select name="country" value={form.country} onChange={handleChange}>
                <option value="NO">Norway</option>
                <option value="JP">Japan</option>
                <option value="BR">Brazil</option>
            </select>
            <label>
                <input name="terms" type="checkbox" checked={form.terms} onChange={handleChange} />
                I accept the terms
            </label>
            <pre>{JSON.stringify(form, null, 2)}</pre>
        </div>
    );
}

ה-handler בודק את סוג השדה כך שה-checkbox שומר בוליאני והאחרים שומרים טקסט. מוסיפים שדה על ידי הוספת מפתח לאובייקט ההתחלתי ושדה עם אותו name; ה-handler לא צריך שינוי. ה-spread שומר על כל שאר השדות (ראו עדכון מערכים ואובייקטים).

שליחת טופס

שימו את לוגיקת השליחה ב-onSubmit של הטופס, לא ב-onClick של הכפתור. onSubmit מופעל גם כשהמשתמש לוחץ Enter בשדה טקסט, מה ש-handler של לחיצה היה מפספס. <button> בתוך טופס הוא כפתור שליחה כברירת מחדל; תנו לכפתורים אחרים type="button" כדי שלא ישלחו.

import { useState } from 'react';

export default function App() {
    const [form, setForm] = useState({ user: 'ada', password: '' });

    function handleChange(e) {
        setForm({ ...form, [e.target.name]: e.target.value });
    }

    function handleSubmit(e) {
        e.preventDefault();
        console.log('submitting', form);
    }

    return (
        <form onSubmit={handleSubmit}>
            <input name="user" value={form.user} onChange={handleChange} />{' '}
            <input name="password" type="password" value={form.password} onChange={handleChange} />{' '}
            <button type="button" onClick={() => setForm({ user: '', password: '' })}>
                Clear
            </button>{' '}
            <button type="submit">Log in</button>
        </form>
    );
}

פתחו את הקונסול, הקלידו סיסמה ולחצו Enter: הטופס רושם את כל האובייקט. לחיצה על "Clear" לא רושמת כלום, כי הוא type="button". הסירו את המאפיין הזה וגם Clear יתחיל לשלוח.

ולידציה והצגת שגיאות

ולידציה פשוטה היא פונקציה שמקבלת את הערכים ומחזירה אובייקט של הודעות. הריצו אותה בשליחה, שמרו את התוצאה ב-state, והציגו כל הודעה מתחת לשדה שלה. השביתו את כפתור השליחה בזמן שבקשה רצה, כדי שלחיצה כפולה לא תשלח את הטופס פעמיים.

import { useState } from 'react';

function validate({ email, age }) {
    const errors = {};
    if (!email.includes('@')) errors.email = 'Enter a valid email.';
    if (!age || Number(age) < 13) errors.age = 'You must be 13 or older.';
    return errors;
}

function saveProfile(data) {
    return new Promise((resolve) => setTimeout(() => resolve(data), 800));
}

export default function App() {
    const [form, setForm] = useState({ email: '', age: '' });
    const [errors, setErrors] = useState({});
    const [status, setStatus] = useState('idle');

    async function handleSubmit(e) {
        e.preventDefault();
        const found = validate(form);
        setErrors(found);
        if (Object.keys(found).length > 0) return;
        setStatus('saving');
        await saveProfile(form);
        setStatus('saved');
    }

    const change = (e) => setForm({ ...form, [e.target.name]: e.target.value });
    const error = { color: 'crimson', margin: '4px 0 8px', fontSize: 13 };

    return (
        <form onSubmit={handleSubmit} noValidate>
            <input name="email" value={form.email} onChange={change} placeholder="Email" />
            {errors.email && <p style={error}>{errors.email}</p>}
            <input name="age" type="number" value={form.age} onChange={change} placeholder="Age" />
            {errors.age && <p style={error}>{errors.age}</p>}
            <div style={{ marginTop: 8 }}>
                <button disabled={status === 'saving'}>
                    {status === 'saving' ? 'Saving...' : 'Save'}
                </button>
                {status === 'saved' && ' Saved.'}
            </div>
        </form>
    );
}

לחצו על Save כשהשדות ריקים כדי לראות את שתי ההודעות, ואז מלאו אותם. saveProfile מחליפה בקשה אמיתית: היא מחכה 800 מילישניות ומסתיימת בהצלחה. המאפיין noValidate מכבה את בועות הוולידציה של הדפדפן עצמו כך שרק ההודעות שלכם מוצגות; הסירו אותו והוסיפו required לשדה כדי להשוות.

אפשר גם לחשב שגיאות בזמן הרינדור במקום לשמור אותן, למשל const emailError = form.email && !form.email.includes('@'), שמציג את ההודעה תוך כדי הקלדה. בחרו את התזמון שמתאים לטופס: בשליחה זה רגוע יותר, ותוך כדי הקלדה נותן משוב מהיר יותר.

form actions ב-React 19

React 19 מוסיפה דרך נוספת לטפל בטופס. מעבירים פונקציה ל-prop action של הטופס. React מונעת בשבילכם את רענון הדף וקוראת לפונקציה עם אובייקט FormData שמחזיק כל שדה שיש לו name. השדות לא צריכים state בכלל: הם לא מבוקרים, ו-React מנקה אותם אחרי שה-action מסתיים.

import { useState } from 'react';

function addComment(text) {
    return new Promise((resolve) => setTimeout(() => resolve(text), 500));
}

export default function App() {
    const [comments, setComments] = useState([]);

    async function postComment(formData) {
        const text = formData.get('comment');
        console.log('action received', text);
        const saved = await addComment(text);
        setComments((list) => [...list, saved]);
    }

    return (
        <form action={postComment}>
            <input name="comment" defaultValue="Nice docs" />{' '}
            <button type="submit">Post</button>
            <ul>
                {comments.map((c, i) => (
                    <li key={i}>{c}</li>
                ))}
            </ul>
        </form>
    );
}

הקלידו תגובה משלכם ופרסמו אותה. הרשימה מציגה את הטקסט שלכם, והשדה חוזר ל-Nice docs: אחרי שה-action מסתיים, React מאפסת שדות לא מבוקרים ל-defaultValue שלהם. ה-action יכול להיות async, ובזמן שהוא רץ React מתייחסת לעדכון כאל transition.

כדי להציג מצב pending או שגיאה מה-action, עטפו אותו ב-useActionState, שמחזיר את התוצאה האחרונה, action עטוף בשביל הטופס, ודגל isPending. כפתור שנמצא עמוק בתוך הטופס יכול גם לקרוא את מצב ה-pending עם useFormStatus מ-react-dom:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Posting...' : 'Post'}</button>;
}

useFormStatus לא נטען בעורכים כאן, ולכן הוא מופיע רק בבלוק הסטטי הזה. צריך לקרוא לו מקומפוננטה שמרונדרת בתוך ה-<form>, לא בקומפוננטה שמרנדרת את הטופס.

state מבוקר עם onSubmit ו-form actions עם FormData עובדים שניהם ב-React 19. שדות מבוקרים מתאימים לטפסים שמגיבים תוך כדי הקלדה (ולידציה חיה, מונה תווים, שדות שתלויים זה בזה). actions מתאימים לטפסים שבהם צריך את הערכים רק כשהמשתמש שולח.