在ReactJs中绑定类或ID上的单击事件

• Z时代
• 2024-01-10
• 分类：问答

我在ReactJs中创建了一些组件。其中包含HTML代码。 组件是Leaflets地图。已导入到地图控制 在ReactJs中绑定类或ID上的单击事件

/** 
* Draws zones control container. 
* 
* @param map 
* 
* @return void 
*/ 
addZoneControl = (map) => { 
    let categories = this.generateZoneCategories(); 
    let control = L.Control.extend({ 
     options: { 
      position: 'topleft' 
     }, 
     onAdd: function (map) { 
      let container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom'); 
      container.style.backgroundColor = 'white'; 
      container.innerHTML = categories; 
      container.id = 'categoriesContainer'; 
      container.onclick = function(){ 
       alert('buttonClicked'); 
      }; 
      return container; 
     } 
    }); 
    map.addControl(new control()); 
}; 

HTML代码（这个HTML代码是动态生成的，但现在被写入静态例如）

/** 
* Generates HTML code from JSON data 
* 
* @return {string} 
*/ 
generateZoneCategories =() => { 
    return '<div class="col-xs-12 col-md-3" id="categories">' + 
      '<p class="text-uppercase" id="filter">Ansicht Filtern</p>' + 
      '<p class="category purple">1. Kategorie <span>CHF 78.00</span></p>' + 
      '<p class="category orange">2. Kategorie <span>CHF 68.00</span></p>' + 
      '<p class="category green">3. Kategorie <span>CHF 58.00</span></p>' + 
      '<p class="category blue">4. Kategorie <span>CHF 48.00</span></p>' + 
     '</div>' 
}; 

ReactJs元器件

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import L from 'leaflet'; 
import 'leaflet/dist/leaflet.css' 
import './style.css'; 
import {childrenType, GridLayer} from 'react-leaflet' 
class SeatMap extends React.Component { 
    componentDidMount() { 
     let map = this.map = L.map(ReactDOM.findDOMNode(this), { 
      minZoom: -3, 
      maxZoom: 3, 
      crs: L.CRS.Simple, 
      zoomsliderControl: false, 
      zoomControl: false, 
      attributionControl: false, 
      doubleClickZoom: false, 
     }); 
     this.addZoneControl(map); 
     map.fitWorld(); 
     /* Here I want to bind click event on category class */ 
     console.log(ReactDOM.findDOMNode('.category').length); 
     } 
. 
. 
. 

我想通过类别类别点击元素来做更多的事情。

使用jQuery我们知道它将会像

$('.category').click(function() { /* magic */ }); 

我不知道该怎么做同样的神奇ReactJs？

回答：

以上是 在ReactJs中绑定类或ID上的单击事件 的全部内容， 来源链接： utcz.com/qa/266143.html