CODEWITHSUNDEEP
javascripthtmlreactjs
dungreact
dungreact

Reputation: 534

How to get Element using useRef in ReactJS

I want to add some event on a schedule card of tui.calendar. I tried to get the root element then querySelectorAll the schedule card's attribute.

The schedule card, calendarRef exists. the root element from getRootElement exists the div tag of the schedules card, but my element still empty.

What is wrong? My purpose is to get the schedule card element then add contextmenu for each. Thanks!

Update: I changed useLayoutEffect to useEffect then it's work. But only on Codesanbox not my project :D I don't know why?

Here is my code

Upvotes: 0

Views: 625

Answers (1)

Maxim Dyuzhinov
Maxim Dyuzhinov

Reputation: 308

Check this out. It looks like it works. I've just got an instance of a calendar with getInstance() and then got a reference to the DOM element via instance.getElement(sc.id,sc.calendarId).

useEffect(() => {
    if (calendarRef && calendarRef.current) {
      const instance = calendarRef.current.getInstance();
      schedules.forEach((sc) => {
        /*
        const instance = calendarRef.current?.getRootElement();
        const element = instance.getElementsByClassName(
          "tui-full-calendar-time-schedule "
        );
        const elementArr = Array.from(element!);
        console.log(elementArr);
        */
        console.log(instance.getElement(sc.id,sc.calendarId));
      });
    }
  });

Upvotes: 1

Related Questions