javascript - 在 ReactJs 的类或 id 上绑定(bind)点击事件

Question

我在 ReactJs 中创建了一些组件。其中包含 HTML 代码。 一个组件是 Leaflets map 。

/**
 * 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());
};

已导入 map 控件的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 中实现同样的魔法？

Answer 1

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

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

关于像 bootstrap、leaflet 这样的附加库的一般建议是搜索 ReactJs 优化库(使用组件)，如 react-bootstrap、react-leaflet。或者，如果没有 ReactJs 优化库，也许是时候搜索其他解决方案了。

页面上的所有可点击元素都应该是组件，以便按本书使用 ReactJs 并获得它的所有好处。

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

Send data to ReactJs function via component