时间戳

首页 > 解决方案 > 在页面渲染后添加事件 React

javascript - 在页面渲染后添加事件 React

问题描述

我有一种情况，在页面渲染后从服务器加载 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>
  );
}

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

标签： javascriptreactjsfrontend

解决方案

上面的答案是正确的，但是请确保在 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);
            })
        }
     }
         
},[])

推荐阅读