ربط حقل نص بالحالة بإستخدام Controlled Input

الحقل المتحكم فيه بياخد value من الحالة وبيحدثها عن طريق onChange

المثال داخل مشروع React يدعم JSX و Hooks

تطبيق الفكرة

لازم تحدث الحالة علشان الكتابة تنعكس على الحقل

ملف App.jsx

import { useState } from "react";
export default function App() {
  const [name, setName] = useState("Osama");
  return <><label>Name <input value={name} onChange={event => setName(event.target.value)} /></label><p>{name}</p></>;
}

النتيجة

الفقرة بتعرض نفس النص الموجود في الحقل