Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Vector Map Click events

cpeople priority asked 2 years ago


How to handle onClick events in MDBVectorMap? I can see the click events API in documentation of Angular, Vue and StandardJS but not in React.


cariforef free answered 2 years ago


Hello, When I add an EventListener on MDBVectorMap, if disable the standard color change on click event. I thought the listener would add an action instead of replacing. When I add my eventListener, the selected area is not colored anymore.

  const ref = useRef(null);

  useEffect(() => {
      const handleClick = (event) => {
          setSelectedRegion(event.target?.id);
          console.log("Button clicked", event.target?.id);
      };

    const element = ref.current;

    element.addEventListener("click", handleClick);

    return () => {
          element.removeEventListener("click", handleClick);
    };
    }, []); 

    return (
          <MDBVectorMap
          mapRef={ ref }
          hoverFill="#0793B4"
          selectFill="#86b24e"
          fill="#FFFFFF"
          style={{ backgroundColor: "#bbdefb" }}
          hover={false} 
          zoomEvents={false}
          selectRegion={selectedRegion} />);

Krzysztof Wilk staff answered 2 years ago


Hi!

For now - you have to use JavaScript to select the items and append an addEventListener to them, sorry about that. We will add the onSelect event as soon as possible :)

Keep coding!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 3.0.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No