How to get Element using useRef in ReactJS

Question

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

Maxim Dyuzhinov · Accepted Answer · 2021-02-01 22:19:08Z

1

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));
      });
    }
  });

answered Feb 1, 2021 at 22:19

Maxim Dyuzhinov

3082 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get Element using useRef in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related