سلام و خسته نباشید خدمت پارسکلیکی های عزیز. مشکلی که دارم اینه که چند تا المنت در متد()compenentDidMount به رندر نهایی اضافه میشن. تا اینجا مسئله ای نیست اما مشکل زمانی رخ میده که نه فایل css روی اون المنت های جدید اجرا میشه و نه حتی به اون المنت ها برای هرگونه رخداد دسترسی دارم. در کل فقط اضافه میشن ولی هیچ کنترلی روشون ندارم. در واقع المنت ها بعد از لود شدن صفحه اضافه میشه و انگار که وجود ندارند. کد ها رو براتون میزارم تا بتونید بهتر مسئله رو درک کنید.

• کد های مربوط به متد ()componentDidMount:

در این قسمت المنت ها رو اضافه میکنم:

      for (let day = 1; day <= days.length; day++)  {

            const weekend = isWeekend(year, month, day);
            const today = isToday(year, month, day);

            let name = '';

            if(day <= 7){
                const dayName = getDayName(year, month,day);
                name = `<div className="name">${dayName}</div>`
            }

            calendar.insertAdjacentHTML(
                "beforeend",
                `<div className='day${weekend ? " weekend" : ""}${today ? " today" : ""}' 
                data-year="${year}" data-month="${month}" data-day="${day}" >
                    ${name}
                    ${day}
                    ${weekend ? "<br/><p style='color:#FFA500'>weekend</p>" : ""}
                    ${today ? "<h3 style='color:#9af467'>today</h3>" : ""}
                </div>`
            );
        }

####### و اینجا یک رویداد کلیک قرار دادم( که البته جون کلاس day رو نمیشناسه، کار نخواهد کرد)

         document.querySelectorAll('#app-calendar .day').forEach(day => {
                day.addEventListener("click", event => {
                    event.currentTarget.classList.toggle("selected");
                });
                day.addEventListener("dblclick", event => {
                    let element = event.target;
                    let year = element.getAttribute('data-year');
                    let month = element.getAttribute('data-month');
                    let day = element.getAttribute('data-day');
                    let date = Date(year + '-' + month + '-' + day);
                    this.setState({
                        date: formatDate(date)
                    });
                    console.log(this.state.date);
                });
            });

• کد های بالا هر دو به ترتیب (با فاصله چند لاین) در متد ()componentDidMount قرار دارند.

**اینم از کد html که در متد رندر اجرا میشه:

<div className="root">
                <div className="clalendar-header">
                    <div id="previous" className="shift"><a href="#"><h3>previous</h3></a></div>
                    <div id="month-name" className="month-name"></div>
                    <div id="future" className="shift"><a href="#"><h3>future</h3></a></div>
                </div>
                <div className="content">
                    <div id="app-calendar"></div>
                </div>
            </div>