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>
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 am happy I can use font-awesome in my projects. I want to put some bars as my open/close button for my menu. The icon itself is not clickable, but the small area between the icon and the border still activates the onClick. The console.log I put in my event handler shows that the icon does not pass the 'name' property needed to activate the state change. Does anyone know how to get around this?
I have tried wrapping it in span and i elements. The icon does show up, but is just not activating the onClick, probably because it is not passing the 'name' property.
My event handler:
menuClick(event) {
/*event.preventDefault();*/
const name = event.target.name;
console.log(name);
this.setState({[name]:!this.state[name]})
}
My button:
<button
name="menuOpen"
style={props.data.menuOpen ?
buttonStyle :
null}
onClick={props.menuClick}
className="menuOpenButton">
<FontAwesomeIcon name="menuOpen" icon="bars" size="3x" />
</button>
and the props are being passed to the child like this:
<Header
data={this.state}
menuClick={this.menuClick} />
Changing the event handler to look for the currentTarget fixed it.
const name = event.currentTarget.name
I have a nested list in React. The LI elements have an onClick event handler. It needs to stop propagation or else all the higher lying event handlers will fire too.
I can do this by having:
<li key='myKey' onClick={this.onClick}/>
combined with
onClick (event) {
event.preventDefault()
}
I can also pass the key by doing:
<li key='myKey' onClick={this.onClick.bind(this, 'myKey'}/>
But how can I pass BOTH?
I have searched long but not found a way to extract the key from the event.
Try something like this:
<li
key={key}
onClick={e => {
e.preventDefault();
// invoke your onClick callback here
this.handleOnClick(key);
}}
/>