Bind Click Event auf Klasse oder ID in ReactJs

Question

Ich habe eine Komponente in ReactJs erstellt. Welche enthält HTML-Code. Eine Komponente ist die Flugblattkarte.

/** 
* 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-Code, der in der Karte Kontrolle importiert wurde

/** 
* 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 Komponente

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


     } 
. 
. 
. 

I (aber jetzt dynamisch generiert werden diese HTML-Code wird beispielsweise statisch geschrieben) gesucht um mehr Sachen zu machen, wenn man auf ein Element mit der Kategorie class klickt.

Mit jQuery wissen wir, dass es so etwas wie

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

Ich frage mich sein, wie in ReactJs gleiche Magie zu tun?

Answer 1

Nach einigen Untersuchungen fand ich etwas, das hilfreich sein könnte.

https://reactjs.org/docs/integrating-with-other-libraries.html
Auf diesem Link finden Sie, was ReactJs über die zusätzliche Bibliothek empfiehlt.

Allgemeine Hinweise über die zusätzliche Bibliothek wie bootstrap, leaflet ist für ReactJs optimierte lib (mit Komponenten) wie reagieren-Bootstrap zu suchen, reagieren-Faltblatt. Oder wenn es keine ReactJs optimierte lib gibt, ist es vielleicht Zeit, nach einer anderen Lösung zu suchen.

Alle anklickbaren Elemente auf der Seite sollten components sein, um ReactJs nach dem Buch zu verwenden und alle seine Vorteile zu erhalten.

Dieses Thema ist vielleicht Thema, aber es gibt eine Lösung, wie klicken Sie auf Komponenten klicken und Daten von sich selbst erhalten.

Send data to ReactJs function via component