So I have a product wrapper that I want to be clicked and on click redirect the user to the specific page of that product. And inside that is the button that can add the product to the cart, but the problem occurs here, because the wrapper has onCLick, when I click the button, the parent onClick is called, So I don't know how to make the button immune to the onCLick of the div.
<div onClick={() => navigate(product.id)}>
<button onClick={() => add(product.id)>Add to Cart</button>
</div>
When the onClick event of a child is called, the event propagates by default and calls the onClick of the parent.
To avoid that, you should call event.stopPropagation() inside the child function.
<button onClick={(event)=>{event.stopPropagation(); /* rest of your code */}}>
Related
I have the following code to use React To print, a library to print a component:
<ReactToPrint
trigger={() =>
<SqIconButton action={(e)=>e} color={"success"}>
<AiIcons.AiFillPrinter style={{color: 'black',fontSize:'1rem'}}/>
</SqIconButton>
}
content={() => componentRef.current}
/>
And my custom Button SqIconButton reads as follows:
export default function SqIconButton({children,color="primary",fontColor="#000000",action,tip="",disableElevation=false,sxstyle={},classes}){
return(
<Tooltip title={tip}>
<Button
color={color}
variant="contained"
onClick={action}
disableRipple={disableElevation}
className={`TBButton ${classes}`}
sx={sxstyle}
>
{children}
</Button>
</Tooltip>
)
}
In the examples of React To Print code for its trigger nothing is referencing "onclick" property on buttons, examples mostly look like this: <button>print this</button> and if I use this element it actually works. But my custom button does not work as is, so I think I have to pass the onclick event over my action custom property, so I'm trying with action={(e)=>e}, but the button does nothing when I press it.
Documentation says about trigger:
A function that returns a React Component or Element. Note: under the hood, we inject a custom onClick prop into the returned Component/Element. As such, do not provide an onClick prop to the root node returned by trigger, as it will be overwritten
So I don't know if onclick will be overwritten how could I pass this event to a child button component.
I have made a simple button in react app.
<button onClick={console.log('clicked')}>Click</button>
The problem is that button is continuously click without clicked by me.
<button onClick={() => console.log('clicked')}>Click</button>
is the solution. When you put paranthesis without using the arrow function, it will automatically execute without waiting for you to click the button
onClick takes function as a parameter. Try this and it should work correctly:
<button onClick={ () => { console.log('clicked') } }>Click</button>
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.
Is it possible to pass the click event from the parent to the child? So when Button is clicked FileUpload is clicked too. My working code is here.
https://codesandbox.io/s/uploadbutton-78h2d
<Button>
<Dialog>
<FileUpload/>
</Dialog>
</Button>
Simply have the onClick event listener on the Button instead of the FileUpload (or have it on both but make sure you're stopping propagation so it doesn't double-fire the event.