Is it possible within react leaflet to know when a right click occurs on the map?
Currently, the onClick handler will send an event and the type will be "click"
<Map
ref="map"
preferCanvas={true}
viewport={this.props.viewport}
onClick={(e) => this.onClickHandler(e)}
>
The event from the onClick will return an object that includes "type":"click"; not specifying the left or right etc.
This is my React code:
<button
className="show-all"
onClick={() => { console.log("button clicked");}}>
button
</button>
This is what rendered in the browser:
<button class="show-all">button</button>
I am so curious: Why is the onclick missing? This will not affect the function, but I just cannot see the onclick name.
The following code has the same problem.
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
function shoot(){
console.log("shoot")
}
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
class ShowAlert extends Component {
showAlert() {
alert("I'm an alert");
}
render() {
return <button onClick={this.showAlert}>show alert</button>;
}
}
ReactDOM.render(
<>
<button onClick={() => console.log("good")}>
Click 1
</button>
<button onClick={shoot}>
Click 2
</button>
<button onClick={handleClick}>
Click 3
</button>
<ShowAlert />
</>
,
document.getElementById('root')
);
And I don't know if this small uncomfortable point is worth discussion.
React implements a synthetic events system that brings consistency and high performance to React apps and interfaces. It achieves consistency by normalizing events so that they have the same properties across different browsers and platforms.
A synthetic event is a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
It achieves high performance by automatically using event delegation. In actuality, React doesn’t attach event handlers to the nodes themselves. Instead, a single event listener is attached to the root of the document. When an event is fired, React maps it to the appropriate component element.
Resource - https://blog.logrocket.com/a-guide-to-react-onclick-event-handlers-d411943b14dd/
As pointed out in the comments to the question and the previous answer, React does not render events in the DOM, so they are not shown in the HTML elements.
I would like to add that if you just want to inspect the React events you can use devtools for that.
For example, for Firefox, MDN provides nice instructions on how to inspect events in devtools, and here is an example for Chrome.
This feature is what I like most, unlike Angular. This is not just about listeners, but also props. React handles the DOM virtually, so everything works virtually than having them in real DOM.
I had the same question in previous days and I noted: why is it so? Just continue reading for what I found specific in React.
You might also surprise why className renders class in the HTML? I mean, you might confuse why class is shown, but not onclick?
In JavaScript, class conflicts with the keyword class and it has a different name, i.e., className. React JSX just works like JavaScript and it binding the class in HTML.
Similar to className, there is htmlFor to the for attribute. You can see for in the rendered HTML like you see class for className.
So, when a React element is rendered in the browser it will only show the HTML attributes, but not React props.
There is onclick in JavaScript and onClick is specific to React (however, React internally transforms it to onclick as pointed out in other answer - synthetic event) and thus onClick is not shown in the DOM when it renders. React updates and works in a virtual DOM.
The only thing you need to note that - do provided props match a DOM attribute case sensitively? If yes, it will show in rendered HTML. Otherwise, No.
I hope, you have now a better understanding about these.
If you would like to see attached listener and props, etc. then you can use React devtools.
How to handle the dblclick event in React? The docs lists onDoubleClick. However the following code does not fire any events when double clicking on the img.
<img src="blub.jpg" onDoubleClick={ () => console.log('Im not fired') } />
some how onDoubleClick works when your browser dev tool is closed
class Clicked extends React.Component{
mark(){
console.log('clicked');
}
render()
{
return (<a href="javascript:void(0)" onClick={this.mark.bind(this)}>click</a>)
}
}
Above click is not firing in Samsung native browser/
You should try React's synthetic touch events, specifically, onTouchStart.
However, using onTouchStart will invoke onClick, so you will either need a property that indicates that the event has fired (so onClick would get ignored), or, you can use different events altogether. such as:
render() {
return (
<a href="javascript:;"
onMouseUp={this.mark.bind(this)}
onTouchEnd={this.mark.bind(this)}>
click
</a>
)
}
I want the OverlayTrigger to be able to dismiss the Popover by both clicking outside the button and clicking on the button. However, when I set the trigger to be trigger={['click', 'focus']}, the Popover would flash and disappear when I click to button to show it.
getInitialState() {
return { show: true };
},
classificationPopover() {
return (
<ReactBootstrap.Popover id="popover" title="Popover">
Pop!
</ReactBootstrap.Popover>
);
},
render: function() {
return (
<div>
<ReactBootstrap.OverlayTrigger
trigger={['click', 'focus']} // Here is probably the tricky part
placement="right"
overlay={this.classificationPopover()}>
<ReactBootstrap.Button
bsStyle="default"
className="btn btn-default btn-circle">
<div className="btn-circle-text">?</div>
</ReactBootstrap.Button>
</ReactBootstrap.OverlayTrigger>
</div>
)
}
fiddle
This happens when you click outside the button, and then you click the button. But if you just click the button and close the popover with the button, things work fine.
I know that adding a RootClose property in OverlayTrigger and just keep "click" for trigger would work, but for my work requirement I'm not allowed to use RootClose, so I need a different solution. Thanks :D
For anyone attempting to use trigger with OverlayTrigger, please consider using Overlay instead.
The OverlayTrigger component is great for most use cases, but as a
higher level abstraction it can lack the flexibility needed to build
more nuanced or custom behaviors into your Overlay components. For
these cases it can be helpful to forgo the trigger and use the Overlay
component directly.
https://react-bootstrap.github.io/components.html#overlays
https://react-bootstrap.github.io/react-overlays/#overlay