How to disable clicking a <div> when clicking a <button> in a <div>
I am using ReactJS with React-Bootstrap and am getting the following content:
<div onClick={this.openModal.bind(this)} className="container">
<div className="content">
<div className="list">
...
</div>
<Button onClick={this.deleteContent.bind(this)}
className="delete-content">X
</Button>
<Modal show={this.state.showModal}
onHide={this.closeModal.bind(this)}
className="edit-content">
...
<Button onClick={this.closeModal.bind(this)}
className="close-modal">X
</Button>
</Modal>
</div>
<div>
In <div className="content">
I am creating a set of components, and when you click on <div className="Container">
, it will open Modal
so you can edit the contents of the container. There is a button for deleting a container together that sits inside <div className="Container">
, as many containers will be displayed iteratively.
I control if it is open Modal
with a component state
where this.openModal()
and this.closeModal()
just toggles a boolean that determines if the modal ( this.state.showModal
) should be displayed .
My problem is, when I click Button
with className="delete-content"
in the container, it also logs the click to open Modal
because it <div className="Container">
has a property onClick
. This way, when I remove the containers, the application gets stuck thinking it is Modal
open, even if it isn't.
My first idea to fix this is to move the property onClick
from <div className="Container">
to <div className="list">
, but I would like all the space around <Button className="delete-content">
to be clickable and if I move it to list
it will constrain the area that can be clicked on.
Is it possible somehow to implement when the button is clicked delete-content
Button
to temporarily disable the property onClick
<div className="Container">
? Or any other ideas / fixes?
source to share
This is due to the propagation of events . To fix the problem, you need to use stopPropagation on the event object.
handleDelete(event) {
event.stopPropagation()
this.deleteContent()
}
<Button
onClick={this.handleDelete.bind(this)}
className="delete-content">X
</Button>
source to share