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
Related
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.
Say I want to stop the event from propagating upon exit from the modal, for example when clicking on the background or the exit button which will close the modal. But then it'll redirect me to the (parent)? onClick event upon exiting.
<Modal onHide={(e) => {
e.stopPropagation();
setShow(false);
...
}}>
<Modal/>
The above does not work. I also tried onExit which also doesn't work.
The workaround was to use a div element around the Modal to control the event.
<div
onClick ={(e) => e.preventPropagation()}
>
<Modal>
<Modal/>
</div>
I am using material UI backdrop and want to have some some tiny form inside of it. But whenever i click on its children the backdrop closes thanks to onClick which supposed to toggle the backdrop.
Is there any way how to stop backdrop onClick from triggering from inside backdrop (it's children) ?
I have tried to use useRef for elements inside but to me it seems crazy to have multiple referencies on elements and checking them in toggle function if it supposed to hide backdrop or not. Also i don't have access to some elements inside of the backdrop;
const handleBackdropToggle = e => {
console.log(e.currentTarget === backdropRef.current);
if (e.currentTarget === backdropRef.current) {
setOpen(!open);
}
};
const handleToggle = e => {
setOpen(!open);
};
<Backdrop
className={classes.backdrop}
open={open}
onClick={handleBackdropToggle}
ref={backdropRef}
>
<div className={classes.form}>
<CommonFormCard
noBorder={true}
onSubmit={onSubmit}
onBack={handleToggle}
submitButtonText={`Odeslat`}
>
<>
<h4>Od kdy má fotograf nafotit nemovitost?</h4>
<CommonForm formData={renderFormData} onChange={onChange} />
</>
</CommonFormCard>
</div>
</Backdrop>;
Rather than toggling your backdrop via onClick on the backdrop, you can use the Click away listener.
The main issue that you are likely experiencing is that you need to stop the propagation of click events in the form. The nature of DOM events is that they propagate up to all ancestors by default. You can prevent this with:
<div className={classes.form} onClick={e => e.stopPropagation()}>
I know I'm answering late. But this solution may prove most efficient.
Don't use onClick of Backdrop component. Instead, add a child button to close the backdrop. Now you can trigger children click events without needing to worry about event propagation to the backdrop parent.
I have a block of code inside a <pre> element which I need it to show the explanation of few key parameters when mouse over. For example, when mouse over keyParameter a mouse over event will be triggered.
render() {
return (
<pre>
`{
keyParameter: ''
}`
</pre>
)
My question how to add an event to keyParameter in this case when the entire code-block is in the string form.
My initial thought is to do some dirty DOM manipulations and add the event listener to the target keyParameter, however, I think there might be the "right" way to implement this feature via the React way.
Below is the effect I would like to achieve,
Take a look at React's Synthetic Events.
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter
onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown
onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp
You can attach any of these as props to your <pre> elements to attach a handler. So you would do something like:
<pre onMouseOver={e => {/* your event handler here */}>
`{
keyParameter: ''
}`
</pre>
I'm hoping to use the cross-browser React JS events listed in React Synthetic Events documentation.
I've created a small div, and am trying to capture the both mouse move (for non-touch) and click events:
....and the div...
<div id="mi-debug"
onClick={this.onClick}
onMouseMove={this.onMove}
>
The click/mouse move work fine on normal screens. On an iPad, no click event ever fires - on a tap, the "onMouseMove" event fires instead.
However, if I don't attach the onMouseMove event handler, the click event fires OK.
This is an older iPad, but I was hoping the cross-browser support advertised would handle this.
Any solutions?
Use this library to solve your react-tap-events Link is https://github.com/zilverline/react-tap-event-plugin
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
and in your render method
render: function() {
return (
<a
href="#"
onTouchTap={this.handleTouchTap}
onClick={this.handleClick}>
Tap Me
</a>
);
},