在页面渲染后添加事件 React答案

【问题标题】：Adding events after the page render React在页面渲染后添加事件 React
【发布时间】：2021-02-03 13:03:53
【问题描述】：

当页面渲染后从服务器加载 SVG 时，我有一种情况，之后我需要向其元素添加某些事件。假设单击矩形后会显示警报。

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

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

【问题讨论】：

您可以尝试useLayoutEffect 而不是useEffect，因为它在 DOM 设置后运行

标签： javascript reactjs frontend

【解决方案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);
            })
        }
     }
         
},[])

【讨论】：