في هذا المشهد البرمجي، يظهر لنا مكون React الذي يهدف إلى فتح متصفح الملفات عند النقر على
المحتوي على أيقونة زائد. يتعامل المكون مع الأمور المتعلقة بالتفاعل مثل النقر على الديف ويقوم بإخفاء إدخال الملف من الرؤية باستخدام خاصية style
وتحديد display
بقيمة “none”. لتحقيق الهدف الذي ورد في السؤال، يمكنك إجراء بعض التعديلات على الشيفرة. يمكنك استخدام حالة محلية لتتبع ما إذا تم اختيار ملف أم لا. إليك تعديل لتحقيق ذلك:
jsximport React, { Component } from 'react';
class Content extends Component {
constructor(props) {
super(props);
this.state = {
selectedFile: null
};
}
handleFileChange = (e) => {
const selectedFile = e.target.files[0];
this.setState({ selectedFile });
// يمكنك إضافة المزيد من المنطق هنا، مثل إرسال الملف إلى الخادم أو معالجته بطريقة أخرى
};
handleClick = () => {
// استدعاء مراجع الملف عند النقر على الديف
this.fileInput.click();
};
render() {
const { selectedFile } = this.state;
return (
<div className="body-content">
<div className="add-media" onClick={this.handleClick}>
<i className="plus icon">i>
{/* الإدخال المخفي لاختيار الملف */}
<input
type="file"
id="file"
style={{ display: "none" }}
ref={(input) => { this.fileInput = input; }}
onChange={this.handleFileChange}
/>
div>
{/* عرض اسم الملف المختار */}
{selectedFile && <p>Selected File: {selectedFile.name}p>}
div>
);
}
}
export default Content;
تمت إضافة حالة محلية selectedFile
لتتبع الملف المختار. وعندما يتم اختيار ملف، يتم تحديث حالة المكون باستخدام setState
، وهذا يؤدي إلى إعادة رسم المكون مع عرض اسم الملف المختار. يتم استدعاء handleClick
عند النقر على
والذي بدوره يستدعي click
على مرجع الإدخال المخفي، مما يؤدي إلى فتح متصفح الملفات.
المزيد من المعلومات
تمثل الشيفرة البرمجية التي قدمتها استخدامًا فعّالًا لتحقيق الغرض المطلوب. ولنلقي نظرة أعمق على بعض النقاط المهمة في هذا السياق:
-
حالة المكون:
- تم إضافة
selectedFile
كحالة محلية باستخدامuseState
لتتبع الملف المختار. - يتم تحديث حالة
selectedFile
عند تغيير الملف باستخدامsetState
.
- تم إضافة
-
التفاعل مع النقر:
- يتم استدعاء
handleClick
عند النقر علىالذي يمثل زر فتح متصفح الملفات.
- في
handleClick
، يتم استدعاءclick
على مرجع الإدخال المخفيfileInput
، مما يؤدي إلى فتح متصفح الملفات.
- يتم استدعاء
-
التفاعل مع تغيير الملف:
- يتم استخدام
onChange
مع الإدخال المخفي للتفاعل مع تغييرات الملف. - يتم استدعاء
handleFileChange
للتعامل مع الملف الذي تم اختياره. في هذا المثال، يتم عرض اسم الملف المختار.
- يتم استخدام
-
التفاعل الاختياري:
- يمكنك توسيع الشيفرة لتضمين المزيد من المنطق بعد اختيار الملف، مثل إرسال الملف إلى الخادم أو معالجته بطريقة أخرى.
-
تمثيل حالة الملف المختار:
- تمت إضافة عنصر
لعرض اسم الملف المختار بمجرد اختياره.
- يتم عرض هذا العنصر فقط عندما يكون هناك ملف مختار.
- تمت إضافة عنصر
هذا النهج يجمع بين الأحداث والحالات لتحقيق تجربة تفاعلية فعّالة، ويعطي القدرة على توسيع المكون لتلبية احتياجات تطبيقك بشكل أفضل. تحترم هذه الشيفرة المبادئ المبنية على React وتوفر حلاً بسيطًا وفعّالًا لفتح متصفح الملفات والتعامل مع الملفات المختارة.