إعادة ضبط حالة مكون بإستخدام key

تغيير key بيخلي React تعتبر المكون نسخة جديدة وتعيد إنشاء حالته

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

تطبيق الفكرة

بنغير معرف النموذج علشان نمسح الاسم المكتوب

ملف App.jsx

import { useState } from "react";
function NameForm() {
  const [name, setName] = useState("");
  return <label>Name <input value={name} onChange={event => setName(event.target.value)} /></label>;
}
export default function App() {
  const [version, setVersion] = useState(0);
  return <><NameForm key={version} /><button onClick={() => setVersion(value => value + 1)}>Reset Form</button></>;
}

النتيجة

بعد كتابة اسم والضغط على الزر الحقل بيرجع فاضي