在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上的單擊事件

回答

相關問題