تفعيل فتح متصفح الملفات في تطبيق React

المحتوي على أيقونة زائد. يتعامل المكون مع الأمور المتعلقة بالتفاعل مثل النقر على الديف ويقوم بإخفاء إدخال الملف من الرؤية باستخدام خاصية style وتحديد display بقيمة “none”.

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

jsxCopy code
import 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 عند النقر على