النماذج المضبوطة وحدود التحقق

import { useState } from "react";
export default function App() { const [name, setName] = useState(""); return <main><h1>Hello, {name || "Guest"}</h1><label htmlFor="name">Name</label><input id="name" value={name} onChange={e => setName(e.target.value)} /></main>; }

Initial: Hello, Guest. Typing Mira: Hello, Mira.

تبقى القيمة نصا وتتبعها التحية دون Effect.

import { useState } from "react";
export default function App() { const [text, setText] = useState(""); const [message, setMessage] = useState(""); function submit(e) { e.preventDefault(); const valid = /^[1-9][0-9]*$/.test(text); setMessage(valid ? "Quantity accepted locally" : "Enter a positive whole number"); } return <main><h1>Quantity</h1><form onSubmit={submit}><label htmlFor="qty">Quantity text</label><input id="qty" value={text} onChange={e => setText(e.target.value)} aria-describedby="result" /><button type="submit">Check</button><p id="result">{message}</p></form></main>; }

Submitting empty text: Enter a positive whole number. Submitting 3: Quantity accepted locally.

يفحص المثال الصيغة عند الإرسال ويبلغ قبولا محليا دون شبكة.