كيف يمكن أن يساعدك استخدام ReactRef Hook في إعادة تعيين حقل الإدخال بعد تحميل ناجح

باستخدام React ، قد تجد أنه من الصعب إعادة تعيين بعض حقول الإدخال أكثر من غيرها. على وجه الخصوص ، يمكن أن تكون مدخلات الملف مشكلة ، ومع ذلك فهذه هي الحقول الدقيقة التي تريد إعادة تعيينها بعد تحميل ملف ناجح.

لحسن الحظ ، يوفر خطاف useRef حلاً بسيطًا. تعرف على كيفية مسح حقل إدخال الملف باستخدام خطاف useRef بعد تحميل ناجح.

إنشاء نموذج تحميل بسيط

لتوضيح كيفية إعادة تعيين حقل إدخال ملف باستخدام useRef ، ستقوم بذلك إنشاء نموذج React بسيط مع حقل إدخال يقبل صورة.

أولاً ، قم بإعداد قيمة حالة باسم selectedFile باستخدام الخطاف useState لتتبع الملف المحدد. ستكون الحالة الأولية للملف المحدد خالية لأن المستخدم لم يحدد ملفًا بعد.

أيضًا ، قم بإنشاء دالة معالج تسمى handleFileChange تقوم بتحديث حالة الملف المحدد عندما يقوم المستخدم بتحديد ملف. أضف وظيفة ثانية تسمى handleSubmit ، والتي يجب أن ترفع الحالة عندما يقوم المستخدم بتحميل الملف.

يستورد {useState} من"تتفاعل";
وظيفةFileUploadForm() {
مقدار ثابت [selectedFile، setSelectedFile] = useState (باطل);





instagram viewer

مقدار ثابت handleFileChange = (حدث) => {
 setSelectedFile (event.target.files [0]);
 };
مقدار ثابت مقبض (حدث) => {
 event.preventDefault () ،
 };
يعود (
 <>


"fileInput"> اختر ملفًا:/label>
"ملف" معرف ="fileInput" onChange = {handleFileChange} />
"يُقدِّم"> تحميل </button>
 </form>
 </>
 );
}

عند اكتمال تحميل الملف ، يجب على التطبيق مسح حقل الإدخال ، والذي ستتعلم كيفية القيام به أدناه.

امسح حقل الإدخال بعد تحميل الملف

إذا كان هذا حقلاً نصيًا ، فيمكنك مسح الإدخال عن طريق ضبط الحالة على سلسلة فارغة:

setSelectedFile ("")

لكن هذا لن يعمل مع حقل إدخال من النوع ملف. يؤدي تعيين متغير حالة الحقل المحدد إلى سلسلة فارغة فقط إلى إزالة بيانات الملف من الحالة وليس من DOM. هذا لأن هذه الحالة لا تشير إلى قيمة الإدخال.

لمسح قيمة الإدخال ، يجب عليك إنشاء مرجع لإدخال الملف باستخدام الخطاف useRef. في هذا المثال ، استورد useRef من React وأنشئ كائن ref يسمى fileRef:

يستورد {useState ، useRef} من"تتفاعل";
وظيفةFileUploadForm() {
// ...
مقدار ثابت fileRef = useRef ()
يعود (
// ...
 );
}

ثم قم بالإشارة إلى المرجع في حقل الإدخال كما هو موضح أدناه.

"fileInput"> اختر ملفًا:/label>
 اكتب ="ملف"
 معرف ="fileInput"
 onChange = {handleFileChange}
 المرجع = {fileRef}
 />
"يُقدِّم"> تحميل </button>
</form>

React يعين حاضِر خاصية المتغير ref لعنصر DOM مما يعني أنه يمكنك الحصول على قيمة الملف مثل هذا:

fileRef.current.value

يمكنك بعد ذلك إعادة تعيين هذه القيمة عن طريق تعيين قيمة خالية لها.

fileRef.current.value = باطل

غلف هذا في دالة تسمى handleReset مثل هذا:

مقدار ثابت handleReset = () => {
 fileRef.current.value = باطل;
};

ثم قم باستدعاء هذه الوظيفة عندما تقوم بتحميل ملف بنجاح لمسح حقل الإدخال.

لماذا يجب عليك إعادة تعيين حقول الإدخال بعد تحميل الملف

من الممارسات الجيدة بشكل عام إعادة تعيين حقل الإدخال بعد تحميل ملف ناجح. هذا لأنه يعطي المستخدم إشارة واضحة إلى أن تحميله كان ناجحًا وأيضًا يتيح لهم فرصة تحميل ملف آخر دون الحاجة إلى مسح الإدخال يدويًا مجال.