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

我在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？

来源

2017-12-27 Stevan Tosic

通过返回所有的HTML你不从作出反应的能力中受益。如果将HTML分离为组件，则可以将侦听器绑定到您想要的任何一个。 – Andy

经过一番调查后，我发现了一些可能有用的东西。

https://reactjs.org/docs/integrating-with-other-libraries.html
在此链接上，您可以找到ReactJs关于附加库的建议。

约像bootstrap附加库一般的建议，leaflet是搜索ReactJs优化LIB（带部件）等反应的自举，反应小叶。或者如果没有ReactJs优化库，也许是搜索其他解决方案的时候了。

页面上的所有可点击元素应该是components为了使用本书中的ReactJs并获得它的所有好处。

这个主题可能是主题，但有一个解决方案如何绑定点击组件并从本身获取数据。

Send data to ReactJs function via component

来源

2018-01-06 22:31:33

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

回答

相关问题