[英]Bind click event on class or id in ReactJs
我在 ReactJs 中创建了一些组件。 其中包含 HTML 代码。 一个组件是传单地图。
/**
* 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 中做同样的魔术?
经过一番调查,我发现了一些可能有用的东西。
https://reactjs.org/docs/integrating-with-other-libraries.html
在此链接上,您可以找到 ReactJs 对附加库的建议。
关于像bootstrap
、 leaflet
这样的附加库的一般建议是搜索 ReactJs 优化的库(带有组件),如 react-bootstrap、react-leaflet。 或者如果没有 ReactJs 优化的库,也许是时候寻找其他解决方案了。
页面上的所有可点击元素都应该是components
,以便按照本书使用 ReactJs 并获得其所有好处。
这个话题可能是话题,但有一个解决方案如何绑定点击组件并从其自身获取数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.