在页面呈现反应之后添加事件

Question

在页面呈现之后，我遇到了从服务器加载SVG的情况，之后，我需要将某些事件添加到它的元素中。假设在点击一个rect之后，它会显示一个警告。

​

import React, { useEffect, useState } from 'react';
import css from "./room-plan.module.css";
import { Button } from "../../components";

export default function RoomPlan({ svg }) {

  useEffect(() => {
    var elements = Array.from(document.querySelectorAll('svg rect'));

    elements.forEach(function(el) {
      el.addEventListener("click", alert("hello"));
   })
  }, [])

  
  return (
      <div>
        <h2 className={css.labels}>Select desk</h2>
          <div id={css.roomPlan} dangerouslySetInnerHTML={{__html: svg, }}></div>
        <div className={css.bookingButtons}>
          <Button>CANCEL</Button>
          <Button>BOOK DESK</Button>
        </div>
      </div>
  );
}

​

但它完全不起作用。只是不会在元素上添加任何事件。因为当它查找所需的选择器时，它还不存在。

Answer 1

上面的答案是正确的，但请确保在组件卸载过程中包含用于清理的return function inside the useEffect

​

useEffect(() => {
    var elements = Array.from(document.querySelectorAll('svg rect'));
    const listener = () => alert("hello");
    
    if(elements) {
       elements.forEach(function(el) {
          el.addEventListener("click", listener);
       })
    }

     return function cleanup(){
        if(elements) {
           elements.forEach(function(el) {
              el.removeEventListener("click", listener);
            })
        }
     }
         
},[])

​